JSでマルチオブジェクトモーションを実装する方法-jsチュートリアル-php.cn

JSでマルチオブジェクトモーションを実装する方法

php中世界最好的语言

リリース： 2018-04-13 10:52:39

オリジナル

1455 人が閲覧しました

今回はJSのマルチオブジェクト移動の実装方法についてお届けします。 JSのマルチオブジェクト移動を実装する際の注意点について、実践的な事例を紹介します。

基本的な手順

1. getElementsByTagName を通じて複数のオブジェクトによって移動される要素を取得します 2. 次に、for ループが要素を走査し、イベントを追加します
3. startMove 関数を定義します。これには、現在の「移動」要素とターゲットの 2 つのパラメーターが必要です価値目標

注意: 複数オブジェクトのモーションでは、すべてを共有することはできません。

質問:

出入りの速度が比較的速い場合、一部のリーは元の状態に戻れず、途中でスタックしてしまいますこれは、すべてのリーがタイマーを共有しているためです

。マウスが最初の li に移動すると、startMove が呼び出され、li が削除されるとタイマーが開始されます。li が半分に達すると、li を元の位置に戻すためにタイマーも開始する必要があります。 2 番目の li. 1 番目タイマーはクリアされ、この時点で 1 番目の li は途中で停止します。

JSでマルチオブジェクトモーションを実装する方法この問題を解決します:

for ループ中に、各 li に独自のタイマーを持たせて、各 li に独自のタイマーを定義します

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;); // 第一步
      for(var i=0;i<liTags.length;i++){ // 第二步
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    var timer = null;
    function startMove(obj,iTarget) { // 第三步，2个参数
      clearInterval(timer);
      timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理
        if(obj.offsetWidth == iTarget){
          clearInterval(timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+&#39;px&#39;;
        }
      },30);
    }
</script>

ログイン後にコピー

。そうすると、starMoveで毎回使用するタイマーは現在のliのものなので、お互いに干渉することはありません。 ここの前のタイマーは

(現在のオブジェクト自身のタイマー) に変更されていますが、ここでは問題ありません。

完全なコードは次のとおりです: obj.timer

liTags[i].timer = null;// 给每个li都添加一个timer

ログイン後にコピー

スタイルを追加:

ログイン後にコピー

完全な JS コード

<style>
    ul{list-style: none;}
    ul li{
      margin: 10px;
      width: 200px;height: 50px;
      background: lightblue;
    }
</style>

ログイン後にコピー

次に、例を見てみましょう: マルチオブジェクトモーション - 透明度の変更

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;);
      for(var i=0;i<liTags.length;i++){
         liTags[i].timer = null;// 给每个li都添加一个timer
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    function startMove(obj,iTarget) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(obj.offsetWidth == iTarget){
          clearInterval(obj.timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+&#39;px&#39;;
        }
      },30);
    }
</script>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。！

推奨読書:

履歴モードで更新時に反映されない vue Route レンダリングページに対処する方法

vue.js シームレスなスクロール効果を実現する詳細な手順

以上がJSでマルチオブジェクトモーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。