<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 322px;
position: fixed;
bottom:0;
right:0;
}
span{
position: absolute;
top:0;
right:0;
width: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
*/
// Get the obj css styles
function getStyle(obj, attr){
if (window.getComputedStyle) {// normal browser supports api (chrome, IE9 +, firefox)
return window.getComputedStyle(obj, null)[attr];
} Else {// IE6 / 7/8 / support api
return obj.currentStyle[attr];
}
}
// easing framework
function animate(obj, json){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
2 // get the current value pattern obtained, calculation step, setting the value of the attribute to change the style of obj = current value pattern PX + step +
var current=0;
var step=0;
was flag = true;
for (var attr in json) {
current = parseInt (getStyle (obj, attr)); // get the value of the pattern, and the cut units, converted into a number
step = (json [attr] - current) / 10; // calculating step
step = step> 0 Math.ceil (step):? Math.floor (step); // the rounding step
obj.style[attr] = current + step + 'px';
// If the animation has been done, remove the timer
if(current != json[attr]){
flag = false; // If any property not reach the terminal flag is set to put the flase
}
}
if(flag){
clearInterval(obj.timer);
}
}, 20);
}
