<!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>
<script type="text/javascript" src="animate.js"></script>
<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})
});
}
</script>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
animate.js
/*
* @Author: Administrator
* @Date: 2018-12-15 20:21:14
* @Last Modified by: Administrator
* @Last Modified time: 2018-12-13 20:04:17
*/
//获取obj的css样式
function getStyle(obj, attr){
if(window.getComputedStyle){//正常浏览器支持的api(chrome,IE9+,firefox)
return window.getComputedStyle(obj, null)[attr];
}else{//IE6/7/8/支持的api
return obj.currentStyle[attr];
}
}
//缓动框架
function animate(obj, json){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//拿2当前样式得值,计算步长，设置obj的改属性样式的值 =当前样式的值+步长+px
var current=0;
var step=0;
var flag=true;
for (var attr in json) {
current = parseInt(getStyle(obj, attr));//获取样式的值，并且切掉单位，转换成number
step = (json[attr]- current) / 10;//计算步长
step = step > 0 ? Math.ceil(step) : Math.floor(step);//把步长取整
obj.style[attr] = current + step + 'px';
//如果动画已经做完，清除定时器
if(current != json[attr]){
flag=false;//如果有任何一个属性没有到达终点，就把flag置为flase
}
}
if(flag){
clearInterval(obj.timer);
}
}, 20);
}
