運動回調-鏈式運動
阿新 • • 發佈:2019-01-02
java start span com posit att bsp else json
<!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>
運動回調-鏈式運動