快捷導(dǎo)航

javascript 緩沖運(yùn)動(dòng)框架的實(shí)現(xiàn)

更新時(shí)間：2017年09月29日 15:26:10 投稿：lqh

這篇文章主要介紹了javascript 緩沖運(yùn)動(dòng)框架的實(shí)現(xiàn)的相關(guān)資料,希望通過(guò)本能幫助到大家，實(shí)現(xiàn)這樣類(lèi)似的功能，需要的朋友可以參考下

javascript 緩沖運(yùn)動(dòng)框架的實(shí)現(xiàn)

框架的使用，大大的提高了我們的編碼的效率，下面分享一個(gè)緩沖運(yùn)動(dòng)框架。

實(shí)例代碼：

/**
 * Created by wang on 2016/8/3.
 */

//獲取非行間樣式和行間樣式
function getStyle(obj,name) {
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }
  else {
    return getComputedStyle(obj,false)[name];
  }
}
//獲取非行間樣式和行間樣式

//緩沖運(yùn)動(dòng)框架
var timer=null;
function startMove(obj,attr,iTarget) {
  clearInterval(obj.timer);
  obj.timer=setInterval(function () {
    var cur=0;

    if(attr=='opacity'){
      cur=Math.round(parseFloat(getStyle(obj,attr))*100);
    }
    else {
      cur=parseInt(getStyle(obj,attr));
    }
    var speed=(iTarget-cur)/6;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if(cur==iTarget){
      clearInterval(timer);
    }
    else {
      if(attr=='opacity'){
        obj.style.filter='alpha(opcity:'+(cur+speed)+')';
        obj.style.opacity=(cur+speed)/100;
      }
      else {
        obj.style[attr]=cur+speed+'px';
      }
    }
  },30)
}
//緩沖運(yùn)動(dòng)框架

如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

PHP中使用微秒計(jì)算腳本執(zhí)行時(shí)間例子
這篇文章主要介紹了PHP中使用微秒計(jì)算腳本執(zhí)行時(shí)間例子,本文先是講解了microtime函數(shù)的一些知識(shí),然后給出了一個(gè)計(jì)算腳本運(yùn)行時(shí)間的類(lèi),需要的朋友可以參考下
2014-11-11
頁(yè)面點(diǎn)擊小紅心js實(shí)現(xiàn)代碼
有時(shí)候我們經(jīng)?？吹接行゜log出現(xiàn)一些點(diǎn)擊頁(yè)面出現(xiàn)小紅心的效果，很是喜歡，這里就為大家分享一下代碼直接引用即可
2018-05-05
有趣的JavaScript隱式類(lèi)型轉(zhuǎn)換操作實(shí)例分析
這篇文章主要介紹了JavaScript隱式類(lèi)型轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了JavaScript隱式類(lèi)型轉(zhuǎn)換操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下
2020-05-05
javscript 數(shù)組扁平化的實(shí)現(xiàn)
這篇文章主要介紹了javscript 數(shù)組扁平化的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
JS實(shí)現(xiàn)列表頁(yè)面隔行變色效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)列表頁(yè)面隔行變色效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
探索Javascript中this的奧秘
本文介紹了JavaScript中的this關(guān)鍵字在各種情況下的含義，實(shí)例都很簡(jiǎn)單，這樣更能有助于加深理解。雖然這只是js中一個(gè)很小的概念，但借此我們可以了解js中函數(shù)的執(zhí)行環(huán)境，充分掌握this的相關(guān)知識(shí)有助于我們?cè)诰帉?xiě)面向?qū)ο蟮腏avaScript程序時(shí)能夠游刃有余。
2016-12-12
微信小程序-詳解微信登陸、微信支付、模板消息
本篇文章主要是介紹了微信小程序-微信登陸、微信支付、模板消息，具有一定的參考價(jià)值，有需要的可以了解一下。
2016-11-11
詳解JavaScript實(shí)現(xiàn)監(jiān)聽(tīng)路由變化
前端實(shí)現(xiàn)路由變化主要有兩種方式，本文主要介紹了這兩種方法的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
layui點(diǎn)擊數(shù)據(jù)表格添加或刪除一行的例子
今天小編就為大家分享一篇layui點(diǎn)擊數(shù)據(jù)表格添加或刪除一行的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
JS實(shí)現(xiàn)的簡(jiǎn)單拖拽功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單拖拽功能,涉及javascript鼠標(biāo)事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2017-03-03