完美运动框架(js)
生活随笔
收集整理的這篇文章主要介紹了
完美运动框架(js)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、前言
學習js運動時，由于在實現多種不同運動效果過程中很多代碼是重復的，故將其封裝達到代碼重用。
二、代碼封裝重用
function startMove(obj, json, fnEnd){clearInterval(obj.timer);//若物體之前開有定時器則先關閉 obj.timer = setInterval(function(){var bStop = true; //假設所有的屬性值運動到了目標值for(var attr in json){//遍歷物體傳過來的json值var start = 0;if(attr === 'opacity'){//透明度start = Math.round(parseFloat(getStyle(obj, attr))*100);}else{//非透明度屬性start = parseInt(getStyle(obj, attr));}if(start != json[attr]){//若有屬性值未運動到目標值，將bStop的值賦為falsebStop = false;}var speed = (json[attr] - start)/6;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//速度為正值向上取整，速度為負值向下取整if(attr === 'opacity'){obj.style.filter = 'alpha(opacity:'+ (start + speed) +')';//IE瀏覽器obj.style.opacity = (start + speed)/100;//非IE瀏覽器}else{obj.style[attr] = start + speed + 'px';}}if(bStop){//所有的屬性值都運動到了目標值,則關閉定時器并執行回調函數 clearInterval(obj.timer);if(fnEnd)fnEnd();}}, 30); }function getStyle(obj, attr){//獲取當前屬性的值if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj, false)[attr];} }三、測試并結果分析
將上面封裝的代碼保存為moveFrame.js文件，并導入如下測試代碼中
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title完美運動框架應用舉例(滿足多個屬性值同時運動)</title><style type="text/css">#one{width: 100px;height: 100px;background-color: red;filter:alpha(opacity:40);opacity: 0.4;}</style><script type="text/javascript" src="moveFrame.js"></script><script type="text/javascript">window.onload = function(){var oBtn = document.getElementById('btn');var oDiv = document.getElementById('one');oBtn.onclick = function(){startMove(oDiv, {'width' : 200, 'height' : 400, 'opacity' : 100}, function(){alert('successful');});};};</script> </head> <body><input type="button" id="btn" value="多屬性值同時運動"><div id="one"></div> </body> </html>測試結果為：chrome、FF、IE6+、Opera、Safari結果都一致。
四、總結
不管做什么特效，如圖片輪播、滑動門特效、淡入淡出等，凡與運動相關都可以直接引入此框架。
本人前端菜鳥，希望這篇文章能對大家有所啟發，文中有誤導大家的地方，希望大伙海涵并給予指正。如果您覺得文章對您有所幫助，您的留言和推薦將對我是莫大的鼓舞！
此文章發布在本人博客園Developer_chang，如需轉載本文，請注明來源： http://www.cnblogs.com/changjianqiu/
轉載于:https://www.cnblogs.com/changjianqiu/p/4320814.html
總結
以上是生活随笔為你收集整理的完美运动框架(js)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 骑电瓶车需要戴头盔吗？
- 下一篇： 2_MVC+EF+Autofac(dbf