ホームページ > 記事 > ウェブフロントエンド > JS は jQuery の animate() アニメーションを実装します

JS は jQuery の animate() アニメーションを実装します

小云云オリジナル: 2018-01-23 10:28:021775ブラウズ

この記事では、ネイティブJSで実装されたjQueryのanimate()アニメーションの例を中心に紹介していますが、編集者がとても良いと思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

パラメータの紹介:

obj	アニメーションを実行する要素
css	の順序と順序を参照する「{属性名:属性値}」の形式のJSON値ペアアニメーション化される本のシーケンス。それに対応する値
interval	属性の各変更の時間間隔
speedFactor	。これにより、アニメーションにバッファリング効果がかかります。一定である(speedFactorは1)
func	アニメーション実行後のコールバック関数

注:

各要素にタイマーを追加する必要があります。そうしないと相互に影響します。

cur != css[arr] は、各属性が目標値に達したかどうかを判断します。すべての属性が目標値に到達した場合にのみタイマーがクリアされます。このフラグの機能は、特定の属性が最初に目標値に到達したが、他の属性が目標値に到達していない場合にタイマーがクリアされないようにすることです。価値。したがって、変更する前にフラグを true に初期化し、ターゲットに達しない属性が見つかったらすぐに、すべての属性がターゲット値に達するまでフラグを false に設定します。

属性値 opacity の値には小数があるため、特別な処理が必要です: Math.ceil(speed) と Math.floor(speed)、および * 100 と / 100 の演算。

function animate(obj, css, interval, speedFactor, func) { 
  clearInterval(obj.timer); 
  function getCss(obj, prop) { 
    if (obj.currentStyle) 
      return obj.currentStyle[prop]; // ie 
    else  
      return document.defaultView.getComputedStyle(obj, null)[prop]; // 非ie 
  } 
  obj.timer = setInterval(function(){ 
    var flag = true; 
    for (var prop in css) { 
      var cur = 0; 
      if(prop == "opacity")  
        cur = Math.round(parseFloat(getStyle(obj, prop)) * 100); 
      else  
        cur = parseInt(getStyle(obj, prop)); 
      var speed = (css[prop] - cur) * speedFactor; 
      speed = speed > 0 ? Math.ceil(speed): Math.floor(speed); 
      if (cur != css[prop]) 
        flag = false; 
      if (prop == "opacity") { 
        obj.style.filter = "alpha(opacity : &#39;+(cur + speed)+&#39; )"; 
        obj.style.opacity = (cur + speed) / 100; 
} 
      else  
        obj.style[prop] = cur + speed + "px"; 
    } 
    if (flag) { 
      clearInterval(obj.timer); 
      if (func) 
        func(); 
    } 
  }, interval); 
} 
var li = document.getElementsByTagName("li"); 
for(var i = 0; i < li.length; i ++){ 
  li[i].onmouseover = function(){ 
    animate(this, {width: 100, opacity: 0.5}, 10, 0.01, function(){ 
      alert("Finished!"); 
    }); 
  } 
}

JS は jQuery の animate() アニメーションを実装します

関連記事