這篇文章主要介紹了JavaScript運動框架之鏈式運動的示例分析,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都創新互聯公司網站建設公司一直秉承“誠信做人,踏實做事”的原則,不欺瞞客戶,是我們最起碼的底線! 以服務為基礎,以質量求生存,以技術求發展,成交一個客戶多一個朋友!專注中小微企業官網定制,成都網站設計、網站制作、外貿營銷網站建設,塑造企業網絡形象打造互聯網企業效應。
鏈式運動就是運動完后接著再運動,比如很多網站中,一個方框的出現和退出:出現時先變寬再變高,退出時先變矮再變窄退出!
之前的模型是:
startMove(obj, json);
現在改為:
startMove(obj, json, fn);
也就是在第一次運動結束的時候執行fn(); fn是傳過來的一個參數,這個參數是個函數,定時器清理之后手動運行fn();如果想采用鏈式運動,那就是在fn中再調用startMove(obj, json, fn),再在里面的fn中調用startMove(obj, json, fn),可以一直玩下去
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>運動框架(五):鏈式運動到完美運動</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); }
感謝你能夠認真閱讀完這篇文章,希望小編分享的“JavaScript運動框架之鏈式運動的示例分析”這篇文章對大家有幫助,同時也希望大家多多支持創新互聯,關注創新互聯行業資訊頻道,更多相關知識等著你來學習!
網頁名稱:JavaScript運動框架之鏈式運動的示例分析
分享鏈接:http://vcdvsql.cn/article2/gdisoc.html
成都網站建設公司_創新互聯,為您提供動態網站、網站建設、標簽優化、App開發、ChatGPT、網站設計
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯