基于前幾篇的運動框架基礎(chǔ)，本文主要講解一下鏈?zhǔn)竭\動，就是運動完后接著再運動，比如很多網(wǎng)站中，一個方框的出現(xiàn)和退出：出現(xiàn)時先變寬再變高，退出時先變矮再變窄退出！
之前的模型是：
startMove(obj, json);
現(xiàn)在改為：
startMove(obj, json, fn);
也就是在第一次運動結(jié)束的時候執(zhí)行fn(); fn是傳過來的一個參數(shù)，這個參數(shù)是個函數(shù)，定時器清理之后手動運行fn();如果想采用鏈?zhǔn)竭\動，那就是在fn中再調(diào)用startMove(obj, json, fn)，再在里面的fn中調(diào)用startMove(obj, json, fn)，可以一直玩下去
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>運動框架(五)：鏈?zhǔn)竭\動到完美運動</title> <style type="text/css"> div { width: 100px; height: 100px; background: orange; margin: 10px; float: left; } </style></head><body> <div id="div1"></div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); oDiv.onmouseover = function() { startMove(oDiv, {width:300,opacity:30}, function() { startMove(oDiv, {height:500}); }); }; oDiv.onmouseout = function() { startMove(oDiv, {height:100}, function() { startMove(oDiv, {width:100,opacity:100}); }) }; function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, null)[attr]; } } function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { var bStop = true; for (var attr in json) { var cur = 0; if (attr === 'opacity') { cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { cur = parseInt(getStyle(obj, attr)); } if (cur != json[attr]) { bStop = false; } var speed = (json[attr] - cur)/10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); cur += speed; if (attr === 'opacity') { obj.style.filter = 'alpha(opacity:' + cur + ')'; obj.style.opacity = cur/100; } else { obj.style[attr] = cur + 'px'; } } if (bStop) { clearInterval(obj.timer); if (fn) fn(); } }, 30); } </script></body></html>最后提取出來的完美運動框架如下，motionFrame.js：
function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, null)[attr]; }}function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { var bStop = true; for (var attr in json) { var cur = 0; if (attr === 'opacity') { cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { cur = parseInt(getStyle(obj, attr)); } if (cur != json[attr]) { bStop = false; } var speed = (json[attr] - cur)/10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); cur += speed; if (attr === 'opacity') { obj.style.filter = 'alpha(opacity:' + cur + ')'; obj.style.opacity = cur/100; } else { obj.style[attr] = cur + 'px'; } } if (bStop) { clearInterval(obj.timer); if (fn) fn(); } }, 30);}
新聞熱點
疑難解答
圖片精選
