Comment utiliser la fonction d'encapsulation de l'effet tampon de mouvement JS

Cette fois, je vais vous montrer comment utiliser la fonction encapsulée de l'effet de tampon de mouvement JS. Quelles sont les précautions pour utiliser la fonction encapsulée de l'effet de tampon de mouvement JS. Voici un cas pratique, prenons. un regard.

J'avais l'habitude d'écrire beaucoup de fonctions de mouvement, mais plus tard j'ai trouvé un moyen de les encapsuler. (mise en mémoire tampon de mouvement).

/*
  物体多属性同时运动的函数
  obj：运动的物体
  oTarget：对象，属性名为运动的样式名，属性值为样式运动的终点值
  ratio：速度的系数
*/
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));
      }
      // 计算速度，此处可判定方向，如向左或向右，先透明后出现或先出现后透明等
      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，则说明所有的属性均已运动完毕，回调函数fn()
    if(bBtn) {
      clearInterval(obj.iTimer);
      if(fn){
        fn();
      }
    }
  }, 50);
}

Les fonctions encapsulées ci-dessus peuvent également être utilisées pour des attributs uniques et des mouvements multi-styles, tels que :

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

C'est tout.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment Webpack importe dynamiquement des fichiers

Comment créer une barre de progression circulaire dans l'applet WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!