tx4-回调函数和仿360开机图片消失效果

本文主要是介绍tx4-回调函数和仿360开机图片消失效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.6回调函数
等动画执行完毕再去执行的函数

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.box {width: 322px;position: fixed;bottom: 0;right: 0;}span{width: 30px;height: 20px;position: absolute;top: 0;right: 0;cursor: pointer;}</style>
</head>
<body><div class="box" id="box"><span></span><div id="t"><img src="images/t.jpg" alt=""/></div><div id="b"><img src="images/b.jpg" alt=""/></div></div>
</body>
</html>
<script>var box = document.getElementById("box");var closeAd = document.getElementsByTagName("span")[0];var b = document.getElementById("b");closeAd.onclick = function () {animate(b,{height:0},function(){animate(box,{width:0})})}//多属性运动框架function animate(obj,json,fn){clearInterval(obj.timer);obj.timer = setInterval(function(){var flag = true; //用来判断是否停止定时器 一定要写在遍历外面for(var attr in json){var current =parseInt(getStyle(obj,attr)); //数值var step = (json[attr] - current) /10;step = step>0 ? Math.ceil(step) : Math.floor(step);obj.style[attr] = current + step + "px";if(current != json[attr]){ //只要目标与json中任意一个值不等 就不能停止定时器 这个一定写在定时器里面flag = false;}}if(flag){clearInterval(obj.timer);if(fn){fn();}}},30);}function getStyle(obj,attr){ //获取属性值if(obj.currentStyle){ //iereturn obj.currentStyle[attr];}else{return window.getComputedStyle(obj,null)[attr]; //w3c}}
</script>