运动回调-链式运动
Posted gxywb
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了运动回调-链式运动相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 400px; top: 100px; } </style> <script type="text/javascript"> window.onload = function() { var oDiv1 = document.getElementById("div1"); oDiv1.onclick = function() { startMove(this, { width: 200 }, 10,function(){ startMove(this,{ height: 200 },10); }); } function startMove(obj, json, iSpeed,fn) { clearInterval(obj.iTimer); var iCur = 0; obj.iTimer = setInterval(function() { var iBtn=true; for(var attr in json) { var iTarget = json[attr]; if(attr == "opacity") { iCur = Math.round(css(obj, "opacity") * 100); } else { iCur = parseInt(css(obj, attr)); } if(iCur != iTarget) { iBtn=false; if(attr == "opacity") { obj.style.opacity = (iCur + iSpeed) / 100; obj.style.filter = ‘alpha(opacity=‘ + (iCur + iSpeed) + ‘)‘; } else { obj.style[attr] = iCur + iSpeed + ‘px‘; } } } if(iBtn){ clearInterval(obj.iTimer); fn && fn.call(obj); } }, 30); } function css(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } } </script> </head> <body> <div id="div1"></div> </body> </html>
以上是关于运动回调-链式运动的主要内容,如果未能解决你的问题,请参考以下文章