js 登录动画效果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="./ext-4.2.1.883/resources/css/ext-all.css">

<script type="text/javascript" src="./ext-4.2.1.883/bootstrap.js"></script>

<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
var loadingImgWidth=0;
var maxwidth=300;
var _totalTimes =0;
function __intervalDo(){
loadingImgWidth +=25;
_totalTimes ++;
if(loadingImgWidth >maxwidth) loadingImgWidth =0;
$("#loadingImg").width(loadingImgWidth).height(10);
}
var _mask;
function showMask(flag){
if(flag){
if(!_mask){
_mask=$("<div class='mask'></div>").appendTo(document.body);
}
_mask.show();
}else{
if(_mask) _mask.hide();
}
}
var timeid;
function showLoading(){
showMask(true);
loadingImgWidth = 0;
_totalTimes =0;
$("#loadingImg").width(0).height(10);
$(".loginloading").show();
timeid = window.setInterval(__intervalDo, 100);

}
function doLogin(){
showLoading();
}
function hideLoading(){
showMask(false);
if (timeid) window.clearInterval(timeid);
$(".loginloading").hide();
}
</script>
<style>
.mask{width:100%;height:100%;background:lightblue;position:absolute;top:0; left:0;z-index:9999;opacity:0.1;}
.box{width:300px;height:40px;background:#cccccc;position:absolute;top:40px;left:40px}
.loginloading {position:absolute; bottom:0; right:0; width: 300px; height:10px; background:#F2F2F2; display:none;}
</style>
</head>
<body>
<div id="" class="box">
<input type="button" name="" value="登录" onClick="doLogin()"><input type="button" value="取消" onclick="hideLoading()">
<div id="" class="loginloading">
<img src="./loading.png"   id ="loadingImg">
</div>
</div>
</body>
</html>

猜你喜欢