コントロール物体の動きをカスタマイズするJavaScript関数(定速、変速)

1.ある元素の横の距離を変更します.定速動画は、ある元素のelementを一定速度でコントロールして目標位置に移動します. 上に上がる

 //    
    function animate(element, target) {
      //     
      clearInterval(element.timeId);
      element.timeId = setInterval(function () {
        //         
        var current = element.offsetLeft;
        //     
        var step = 10;
        step = target > current ? step : -step;
        current += step;
        if (Math.abs(current - target) > Math.abs(step)) {
          element.style.left = current + "px";
        } else {
          clearInterval(element.timeId);
          element.style.left = target + "px";
        }
      }, 20);
    }

 1.ある元素の横の距離を変更します.トランスミッション動画は、ある要素のelementをコントロールして、目標位置に移動することができます. 上に上がる
トランスミッション原理targt-current/10;計算結果は小数点以下が発生し、問題が発生する可能性があります.このように解決します.ステップ数が正の場合は、Math.ceeirを上に整理します.ステップ数が負の場合は、Math.florを下に修正します.

//    
    function animate(element, target) {
      //     
      clearInterval(element.timeId);
      element.timeId = setInterval(function () {
        //         
        var current = element.offsetLeft;
        //     
        var step = (target-current)/10;
        step = step>0?Math.ceil(step):Math.floor(step);
        current += step;
        element.style.left = current + "px";
        if(current==target) {
          //     
          clearInterval(element.timeId);
        }
        //    :
        console.log("    :"+target+",    :"+current+",      :"+step);
      }, 20);
    }

3.任意のオブジェクトを取得し、そのオブジェクトの属性の値を変更します.

//                    ---        
  function getStyle(element,attr) {
    return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
  }



  //element---  
  //json---  ---          
  //fn---  
  function animate(element,json,fn) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
      var flag=true;//  ,  ,      
      for(var attr in json){
        //             
        var current=parseInt(getStyle(element,attr));
        //           
        var target=json[attr];
        //     
        var step=(target-current)/10;
        step=step>0?Math.ceil(step):Math.floor(step);
        current+=step;//     
        element.style[attr]=current+"px";
        if(current!=target){
          flag=false;
        }
      }
      if(flag){
        //     
        clearInterval(element.timeId);
        //                 ,            
        if(fn){
          fn();
        }
      }


      //    
      console.log("  :"+target+",  :"+current+",       :"+step);
    },20);
  }

4.任意のオブジェクトを取得し、オブジェクトの1つ以上の属性の値を変更します. 

 //                : left--->   left    ,width---       
    function getStyle(element,attr) {
      //             
      return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
    }
    //    

    //element---  
    //attr---    
    //target---    
    function animate(element,attr ,target) {
      //     
      clearInterval(element.timeId);
      element.timeId = setInterval(function () {
        //         
        var current = parseInt(getStyle(element,attr));//    //===============================
        //     
        var step = (target-current)/10;
        step = step>0?Math.ceil(step):Math.floor(step);
        current += step;
        element.style[attr] = current + "px";//============================================
        if(current==target) {
          //     
          clearInterval(element.timeId);
        }
        //    :
        console.log("    :"+target+",    :"+current+",      :"+step);
      }, 20);
    }

5.任意のオブジェクトを取得し、オブジェクトの1つ以上の属性の値を変更し、コールバック関数、つまりパラメータとして関数に入ることができます.

//                    ---        
  function getStyle(element,attr) {
    return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
  }

  //element---  
  //json---  ---          
  //fn---  
  function animate(element,json,fn) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
      var flag=true;//  ,  ,      
      for(var attr in json){
        //             
        var current=parseInt(getStyle(element,attr));
        //           
        var target=json[attr];
        //     
        var step=(target-current)/10;
        step=step>0?Math.ceil(step):Math.floor(step);
        current+=step;//     
        element.style[attr]=current+"px";
        if(current!=target){
          flag=false;
        }
      }
      if(flag){
        //     
        clearInterval(element.timeId);
        //                 ,            
        if(fn){
          fn();
        }
      }


      //    
      console.log("  :"+target+",  :"+current+",       :"+step);
    },20);
  }

//  。  button，id bth。   html

  my$("btn1").onclick=function () {

    var json1={"width":400,"height":500,"left":500,"top":80};
      animate(my$("dv"),json1,function () {
        var json2={"width":40,"height":50,"left":50,"top":800};
        animate(my$("dv"),json2,function () {
          var json3={"width":450,"height":550,"left":550,"top":600};
          animate(my$("dv"),json3);
        });
      });
  };

6.最終版では、透明度や階層も変更できます.

  //                    ---        
  function getStyle(element, attr) {
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
  }

  function animate(element, json, fn) {
    clearInterval(element.timeId);//     
    //   ,        id
    element.timeId = setInterval(function () {
      var flag = true;//  ,  ,      
      //  json                  
      for (var attr in json) {
        //      attr    opacity
        if (attr == "opacity") {
          //           ,        100 
          var current = getStyle(element, attr) * 100;
          //        100 
          var target = json[attr] * 100;
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//     
          element.style[attr] = current / 100;
        } else if (attr == "zIndex") { //      attr    zIndex
          //                
          element.style[attr] = json[attr];
        } else {
          //     
          //             
          var current = parseInt(getStyle(element, attr));
          //           
          var target = json[attr];
          //     
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//     
          element.style[attr] = current + "px";
        }
        //      
        if (current != target) {
          flag = false;
        }
      }
      if (flag) {
        //     
        clearInterval(element.timeId);
        //                 ,            
        if (fn) {
          fn();
        }
      }
      //    
      console.log("  :" + target + ",  :" + current + ",       :" + step);
    }, 20);
  }


  //zIndex:1000
  //   :     ----  ---  100 
  my$("btn1").onclick = function () {

    var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2};
    animate(my$("dv"), json1, function () {
      animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000});
    });
  };