javascript實(shí)現(xiàn)網(wǎng)頁(yè)中涉及的簡(jiǎn)易運(yùn)動(dòng)(改變寬高、透明度、位置)
平時(shí)工作中寫(xiě)網(wǎng)頁(yè)涉及的運(yùn)動(dòng)往往都非常簡(jiǎn)單,比如改變寬高,透明度,位置,是最常用的幾種形式,為了省事,整合了下,于是就有了下面這個(gè)東東:
兼容:IE系列、chrome、firefox、opera、Safari、360
/* javascript簡(jiǎn)易運(yùn)動(dòng) Move.action(dom對(duì)象,json格式屬性值對(duì),緩動(dòng)參考值,回調(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', //判斷是否空對(duì)象 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]; } }, //運(yùn)動(dòng) action: function(obj, json, sv, callback) { _this = this; //obj是否為空 if (_this.isEmptyObject(obj)) { return false; } //運(yùn)動(dòng)開(kāi)始 clearInterval(obj.timer); obj.timer = setInterval(function() { var isAllCompleted = true, //假設(shè)全部運(yùn)動(dòng)都完成了 speed, //速度 attrValue, //當(dāng)前值 targetV; //目標(biāo)值 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)過(guò)程中存在尚未結(jié)束的運(yùn)動(dòng),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)結(jié)束后,只有當(dāng)全部運(yùn)動(dòng)結(jié)束后(isAllCompleted=true)時(shí)才關(guān)閉定時(shí)器 if (isAllCompleted) { clearInterval(obj.timer); if (typeof callback === 'function') { callback(); } } }, 30); } };
以上就是描述了javascript實(shí)現(xiàn)網(wǎng)頁(yè)中涉及的簡(jiǎn)易運(yùn)動(dòng)的方法,希望對(duì)大家實(shí)現(xiàn)javascript簡(jiǎn)易運(yùn)動(dòng)有所啟發(fā)。
- javascript獲取網(wǎng)頁(yè)寬高方法匯總
- JS獲取屏幕,瀏覽器窗口大小,網(wǎng)頁(yè)高度寬度(實(shí)現(xiàn)代碼)
- javascript獲取和判斷瀏覽器窗口、屏幕、網(wǎng)頁(yè)的高度、寬度等
- 獲取JS中網(wǎng)頁(yè)各種高寬與位置的方法總結(jié)
- JavaScript獲取網(wǎng)頁(yè)、瀏覽器、屏幕高度和寬度匯總
- javascript獲取網(wǎng)頁(yè)各種高寬及位置的方法總結(jié)
- JS獲取網(wǎng)頁(yè)屬性包括寬、高等等
- jQuery javascript獲得網(wǎng)頁(yè)的高度與寬度的實(shí)現(xiàn)代碼
- JavaScript獲取網(wǎng)頁(yè)的寬高及如何兼容詳解
相關(guān)文章
微信小程序中使用ECharts 異步加載數(shù)據(jù)實(shí)現(xiàn)圖表功能
本文通過(guò)實(shí)例代碼給大家介紹了微信小程序中使用ECharts 異步加載數(shù)據(jù)實(shí)現(xiàn)圖表功能,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-07-07前端實(shí)現(xiàn)電子簽名(web、移動(dòng)端)通用的實(shí)戰(zhàn)過(guò)程
電子簽名通俗來(lái)說(shuō)就是通過(guò)技術(shù)手段實(shí)現(xiàn)在電子文檔上加載電子形式的簽名,下面這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)電子簽名(web、移動(dòng)端)通用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12Javascript-Mozilla和IE中的一個(gè)函數(shù)直接量的問(wèn)題
Javascript-Mozilla和IE中的一個(gè)函數(shù)直接量的問(wèn)題...2007-01-01無(wú)循環(huán) JavaScript(map、reduce、filter和find)
本文由淺入深地介紹了map、reduce、filter和find函數(shù),如何一步一步把循環(huán)從代碼中抽離掉2017-04-04javascript動(dòng)畫(huà)對(duì)象支持加速、減速、緩入、緩出的實(shí)現(xiàn)代碼
javascript動(dòng)畫(huà)對(duì)象支持加速、減速、緩入、緩出的實(shí)現(xiàn)代碼,需要的朋友可以參考下2012-09-09js實(shí)現(xiàn)簡(jiǎn)單的點(diǎn)名器隨機(jī)色實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)簡(jiǎn)單的點(diǎn)名器隨機(jī)色的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09JavaScript使用循環(huán)和分割來(lái)替換和刪除元素實(shí)例
一個(gè)JavaScript實(shí)例,使用循環(huán)和分割來(lái)替換和刪除元素,很簡(jiǎn)單,但很實(shí)用,建議初學(xué)者學(xué)習(xí)下2014-10-10javascript產(chǎn)生隨機(jī)數(shù)方法匯總
這篇文章主要介紹了javascript產(chǎn)生隨機(jī)數(shù)方法匯總的相關(guān)資料,需要的朋友可以參考下2016-01-01微信小程序?qū)崿F(xiàn)頂部普通選項(xiàng)卡效果(非swiper)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部普通選項(xiàng)卡效果,非swiper,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08