JSでマルチオブジェクトの動きを実現する方法を詳しく解説-jsチュートリアル-php.cn

JSでマルチオブジェクトの動きを実現する方法を詳しく解説

韦小宝

リリース： 2018-01-24 09:55:49

オリジナル

1075 人が閲覧しました

この記事では、JS でマルチオブジェクトの動きを実現する方法を主に紹介し、javascriptマルチオブジェクトの動きを実現するための原理と関連する操作テクニックを詳しく説明します。この記事を参照してください

この記事では、JS でマルチオブジェクトの動きを実現する方法を例を通して分析します。参考として皆さんと共有してください。詳細は次のとおりです:

基本的な手順

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

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

問題:

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

マウスが最初の li に到達したとき。 startMove を呼び出してタイマーを開始します。マウスが li を削除すると、li を元の位置に戻すためにタイマーも開始する必要があります。li が半分に達すると、2 番目の 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

ログイン後にコピー

いくつかのスタイルを追加します:

<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>

ログイン後にコピー

完全な 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>

ログイン後にコピー

上記はこの内容のすべてですこの記事が皆さんの JavaScript の学習に役立つことを願っています。ヘルプが提供されています。！