开机动画
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开机动画</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
display: block;
}
#box{
position:fixed;
right: 0;
bottom: 0;
}
.x{
width: 20px;
height: 20px;
position: absolute;
right: 8px;
top: 0px;
}
</style>
</head>
<body>
<div id="box">
<div class="top">
<span class="x"></span>
<img src="images/t.jpg" alt="">
</div>
<div class="bottom"><img src="images/b.jpg" alt=""></div>
</div>
</body>
</html>
<script>
window.onload = function(){
var box =document.getElementById("box");
var top = box.children[0];
var bottom = box.children[1];
var x = top.children[0];
console.log(top)
console.log(bottom)
x.onclick =function(){
animate(bottom,{height:0},function(){
animate(box,{width:0})
})
}
function animate(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag = true;
for(var k in json){
var target = json[k];
// leader = 当前元素的属性值
var leader =parseInt(getStyle(obj,k));
// 缓动公式step =(target - leader)/10 leader = leader + step;
var step =(target - leader)/10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
// 赋值给元素
obj.style[k] = leader +"px";
if(leader != target){
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
if(fn() !=null){
fn()
}
}
},20)
}
// 获取样式的方法 元素 属性
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return window.getComputedStyle(obj, null)[attr];
}
};
}
</script>
浙公网安备 33010602011771号