javascript實現(xiàn)網(wǎng)頁中涉及的簡易運動(改變寬高、透明度、位置)
平時工作中寫網(wǎng)頁涉及的運動往往都非常簡單,比如改變寬高,透明度,位置,是最常用的幾種形式,為了省事,整合了下,于是就有了下面這個東東:
兼容:IE系列、chrome、firefox、opera、Safari、360
/* javascript簡易運動 Move.action(dom對象,json格式屬性值對,緩動參考值,回調(diào)方法) 示例: var box = document.getElementById('Ele'); Move.action(box,{width:500,height:200,left:200,top:100,marginLeft:10,opacity:.5},5,function(){ console.log('end'); }); */ var Move = { version: '1.5', //判斷是否空對象 isEmptyObject: function(obj) { for (var attr in obj) { return false; } return true; }, //取CSS樣式值 getStyle: function(obj, attr) { if (obj.currentStyle) { //IE return obj.currentStyle[attr]; } else { return getComputedStyle(obj, null)[attr]; } }, //運動 action: function(obj, json, sv, callback) { _this = this; //obj是否為空 if (_this.isEmptyObject(obj)) { return false; } //運動開始 clearInterval(obj.timer); obj.timer = setInterval(function() { var isAllCompleted = true, //假設全部運動都完成了 speed, //速度 attrValue, //當前值 targetV; //目標值 for (attr in json) { attrValue = _this.getStyle(obj, attr); switch (attr) { case 'opacity': attrValue = Math.round((isNaN(parseFloat(attrValue)) ? 1 : parseFloat(attrValue)) * 100); speed = (json[attr] * 100 - attrValue) / (sv || 4); targetV = json[attr] * 100; break; default: attrValue = isNaN(parseInt(attrValue)) ? 0 : parseInt(attrValue); speed = (json[attr] - attrValue) / (sv || 4); targetV = json[attr]; } speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //如果循環(huán)過程中存在尚未結束的運動,isAllCompleted為假 if (attrValue != targetV) { isAllCompleted = false; } switch (attr) { case 'opacity': { obj.style.filter = "alpha(opacity=" + (attrValue + speed) + ")"; obj.style.opacity = (attrValue + speed) / 100; }; break; default: obj.style[attr] = attrValue + speed + 'px'; } } //所有循環(huán)結束后,只有當全部運動結束后(isAllCompleted=true)時才關閉定時器 if (isAllCompleted) { clearInterval(obj.timer); if (typeof callback === 'function') { callback(); } } }, 30); } };
以上就是描述了javascript實現(xiàn)網(wǎng)頁中涉及的簡易運動的方法,希望對大家實現(xiàn)javascript簡易運動有所啟發(fā)。
相關文章
微信小程序中使用ECharts 異步加載數(shù)據(jù)實現(xiàn)圖表功能
本文通過實例代碼給大家介紹了微信小程序中使用ECharts 異步加載數(shù)據(jù)實現(xiàn)圖表功能,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-07-07前端實現(xiàn)電子簽名(web、移動端)通用的實戰(zhàn)過程
電子簽名通俗來說就是通過技術手段實現(xiàn)在電子文檔上加載電子形式的簽名,下面這篇文章主要給大家介紹了關于前端實現(xiàn)電子簽名(web、移動端)通用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12Javascript-Mozilla和IE中的一個函數(shù)直接量的問題
Javascript-Mozilla和IE中的一個函數(shù)直接量的問題...2007-01-01無循環(huán) JavaScript(map、reduce、filter和find)
本文由淺入深地介紹了map、reduce、filter和find函數(shù),如何一步一步把循環(huán)從代碼中抽離掉2017-04-04javascript動畫對象支持加速、減速、緩入、緩出的實現(xiàn)代碼
javascript動畫對象支持加速、減速、緩入、緩出的實現(xiàn)代碼,需要的朋友可以參考下2012-09-09JavaScript使用循環(huán)和分割來替換和刪除元素實例
一個JavaScript實例,使用循環(huán)和分割來替換和刪除元素,很簡單,但很實用,建議初學者學習下2014-10-10javascript產(chǎn)生隨機數(shù)方法匯總
這篇文章主要介紹了javascript產(chǎn)生隨機數(shù)方法匯總的相關資料,需要的朋友可以參考下2016-01-01微信小程序?qū)崿F(xiàn)頂部普通選項卡效果(非swiper)
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)頂部普通選項卡效果,非swiper,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08