jQuery热气球动画背景登录框js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery热气球动画背景登录框js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery热气球动画背景登录框</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />

</head>
<body>


<div class="login">
    <div class="box png">
		<div class="logo png"></div>
		<div class="input">
			<div class="log">
				<div class="name">
					<label>用户名</label><input type="text" class="text" id="value_1" placeholder="用户名" name="value_1" tabindex="1">
				</div>
				<div class="pwd">
					<label>密　码</label><input type="password" class="text" id="value_2" placeholder="密码" name="value_2" tabindex="2">
					<input type="button" class="submit" tabindex="3" value="登录">
					<div class="check"></div>
				</div>
				<div class="tip"></div>
			</div>
		</div>
	</div>
    <div class="air-balloon ab-1 png"></div>
	<div class="air-balloon ab-2 png"></div>
    <div class="footer"></div>
</div>
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/fun.base.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--[if IE 6]>
<script src="js/DD_belatedPNG.js" type="text/javascript"></script>
<script>DD_belatedPNG.fix('.png')</script>
<![endif]-->
</body>
</html>

JS代码(script.js):

$(function(){
	airBalloon('div.air-balloon');
}
);
	/*@function 热气球移动@update by julying,2012/7/25*/
function airBalloon(balloon){
	var viewSize = [],viewWidth = 0,viewHeight = 0;
	resize();
	$(balloon).each(function(){
	$(this).css({
	top:rand(40,viewHeight * 0.5 ),left:rand( 10,viewWidth - $(this).width() )}
);
	fly(this);
}
);
	$(window).resize(function(){
	resize()$(balloon).each(function(){
	$(this).stop().animate({
	top:rand(40,viewHeight * 0.5 ),left:rand( 10,viewWidth - $(this).width() )}
,1000,function(){
	fly(this);
}
);
}
);
}
);
	function resize(){
	viewSize = getViewSize();
	viewWidth = $(document).width();
	viewHeight = viewSize[1];
}
function fly(obj){
	var $obj = $(obj);
	var currentTop = parseInt($obj.css('top'));
	var currentLeft = parseInt($obj.css('left') );
	var targetLeft = rand( 10,viewWidth - $obj.width() );
	var targetTop = rand(40,viewHeight /2 );
	/*求两点之间的距离*/
var removing = Math.sqrt( Math.pow( targetLeft - currentLeft,2 ) + Math.pow( targetTop - currentTop,2 ) );
	/*每秒移动24px ，计算所需要的时间，从而保持 气球的速度恒定*/
var moveTime = removing / 24;
	$obj.animate({
	top:targetTop,left:targetLeft}
,moveTime * 1000,function(){
	setTimeout(function(){
	fly(obj);
}
,rand(1000,3000) );
}
);
}
}
;

CSS代码(main.css):

@charset "utf-8";html,body{margin:0;padding:0;width:100%;}
body{font-size:12px;font-family:"微软雅黑";color:#333;line-height:160%;background:url(../images/login-bg.jpg) center top repeat-x #FFF;height:100%;}
p,ul,.name,.pwd,dd,h1,h2,h3,form,input,select,textarea{margin:0;padding:0;border:0;font-family:"微软雅黑";line-height:150%;}
ul,li{list-style:none;}
div,p{word-wrap:break-word;}
img{border:none;}
input,button,select,textarea{outline:none}
/*login*/
.login{padding:1px 0 0 0;background:url(../images/login-bg.jpg) center top no-repeat #FFF;padding:150px 0 0 0;}
.login input.submit{border:none;font-weight:bold;color:#FFF;margin:25px 0 0 150px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:#CCC 0px 0px 5px;-moz-box-shadow:#CCC 0px 0px 5px;box-shadow:#CCC 0px 0px 5px;background:#31b6e7;cursor:pointer;}
.login input.submit:hover{background:#ff9229;}
.login input.submit{padding:6px 20px;}
.login .box{position:relative;z-index:100;margin:0 auto;width:700px;height:320px;background:url(../images/login.png) center top no-repeat;}
.login .log{position:relative;width:370px;height:260px;margin:0 auto;padding:90px 0 0 20px;}
.login .logo{height:85px;position:absolute;top:15px;left:180px;background:url(../images/logo-login.png) no-repeat;width:350px;height:50px;}
.login label{display:inline-block;width:70px;text-align:right;padding-right:20px;vertical-align:middle;}
.login .name{padding:10px 5px;font-size:14px;}
.login .pwd{padding:10px 5px;font-size:14px;}
.login .alt{position:absolute;top:43px;left:260px;font-size:20px;}
.login .text{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
.login .copyright{position:absolute;left:0;width:100%;bottom:-40px;text-align:center;color:#AAA;}
.login .air-balloon{position:absolute;top:-100px;left:-100px;z-index:50;}
.login .air-balloon.ab-1{width:43px;height:78px;background:url(../images/air-balloon-1.png) no-repeat;}
.login .air-balloon.ab-2{width:24px;height:31px;background:url(../images/air-balloon-2.png) no-repeat;}
.login .footer{position:fixed;left:0;bottom:0;z-index:-1;width:100%;height:198px;background:url(../images/login-foot.jpg) center bottom repeat-x;}
.text{border:1px solid #CCC;padding:5px;background-color:#FCFCFC;line-height:14px;width:220px;font-size:12px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:#CCC 0px 0px 5px;-moz-box-shadow:#CCC 0px 0px 5px;box-shadow:#CCC 0px 0px 5px;border:1px solid #CCC;font-size:12px;}
.text:focus{border:1px solid #31b6e7;background-color:#FFF;-webkit-box-shadow:#CCC 0px 0px 5px;-moz-box-shadow:#CCC 0px 0px 5px;box-shadow:#0178a4 0px 0px 5px;}
.text:hover{background-color:#FFF;}

附件:下载该文件资源,减少时间成本(增值服务)