仿360开机
今天来写一下360的开机效果
先来开一下效果：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
322px;
position: fixed;
bottom:0;
right:0;
}
span{
position: absolute;
top:0;
right:0;
30px;
height: 20px;
cursor: pointer;
}
.box img{
vertical-align: top;
}
</style>
</head>
<body>
<div class="box" id="box">
<span></span>
<div class="hd" id="hd">
<img src="images/t.jpg" alt=""/>
</div>
<div class="bd" id="bt">
<img src="images/b.jpg" alt=""/>
</div>
</div>
</body>
</html>
javascript部分代码如下：
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var close =$('box').children[0];
close.onclick=function(){
animate($('bt'),{"height": 0},function(){
animate($('box'),{"width": 0});
});
}
function getStyle(obj, attr){
if(window.getComputedStyle){
return window.getComputedStyle(obj, null)[attr];
}else{
return obj.currentStyle[attr];
}
}
//缓动框架(基本的缓动动画都可以用缓动框架来实现)
function animate(obj, json,callback){
// 1.清除定时器
clearInterval(obj.timer);
// 2.设置定时器
obj.timer = setInterval(function(){
// 3.计算当前属性值
var current=0;
var step=0;
// 4.关闭定时器标志位
var flag=true;
// 5.遍历json数组
for (var attr in json) {
current = parseInt(getStyle(obj, attr));
// 6.计算步长
step = (json[attr]- current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// 7.代入动画公式
obj.style[attr] = current + step + 'px';
if(current != json[attr]){
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
if(callback && typeof callback == 'function'){
callback();
}
}
}, 20);
}
</script>