欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實現(xiàn)運動緩沖效果的封裝函數(shù)示例

 更新時間：2018年02月18日 09:22:44   作者：MaxLucio  
這篇文章主要介紹了JS實現(xiàn)運動緩沖效果的封裝函數(shù),涉及JavaScript時間函數(shù)與數(shù)值運算相關操作技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)運動緩沖效果的封裝函數(shù)。分享給大家供大家參考，具體如下：

之前經(jīng)常寫運動函數(shù)，要寫好多好多，后來想辦法封裝起來。（運動緩沖）。

/*
  物體多屬性同時運動的函數(shù)
  obj：運動的物體
  oTarget：對象，屬性名為運動的樣式名，屬性值為樣式運動的終點值
  ratio：速度的系數(shù)
*/
function bufferMove(obj, oTarget, fn,ratio = 8) {
  clearInterval(obj.iTimer);
  obj.iTimer = setInterval(function () {
    // 此處設定開關bBtn，假設所有的屬性均已運動完畢true
    var bBtn = true;
    for(var sAttr in oTarget){
      // 獲取當前值，此處兼容透明度的變化
      if(sAttr === 'opacity') {
        var iCur = parseFloat(getStyle(obj, sAttr) * 100);
      } else {
        var iCur = parseInt(getStyle(obj, sAttr));
      }
      // 計算速度，此處可判定方向，如向左或向右，先透明后出現(xiàn)或先出現(xiàn)后透明等
      var iSpeed = (oTarget[sAttr] - iCur) / ratio;
      iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
      // 計算下一次的值
      var iNext = iCur + iSpeed;
      // 賦值給對應樣式
      if(sAttr ==='opacity') {
        obj.style.opacity = iNext / 100;
        obj.style.filter = 'alpha(opacity=' + iNext +')';
      } else {
        obj.style[sAttr] = iNext + 'px';
      }
      // 清除定時器，當前的位置和終點值是否相等，相等則說明結束
      if(iNext !== oTarget[sAttr]) {
        bBtn = false;
      }
    }
    // 如果bBtn的值為true，則說明所有的屬性均已運動完畢，回調函數(shù)fn()
    if(bBtn) {
      clearInterval(obj.iTimer);
      if(fn){
        fn();
      }
    }
  }, 50);
}

以上封裝函數(shù)也可以用于單個屬性，多樣式運動，比如：

bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);

就這樣。

更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

最新評論