ホームページ > 記事 > ウェブフロントエンド > JSを使ったマルチオブジェクトの動作例を共有

JSを使ったマルチオブジェクトの動作例を共有

小云云オリジナル: 2018-01-24 09:02:111263ブラウズ

この記事では、JS でマルチオブジェクトの動きを実現する方法を主に紹介し、マルチオブジェクトの動きを実現するための JavaScript の原理と関連する操作テクニックをサンプルの形式で詳しく分析します。必要な友人が参考になれば幸いです。それは誰にとっても役立ちます。

基本的な手順

1. getElementsByTagName を使用して、複数のオブジェクトによって移動される要素を取得します
2. 次に、for ループで要素を走査し、イベントを追加します
3.現在の要素「モーションを実行中」とターゲット値 target の 2 つのパラメータが必要です

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

<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>

問題:

出入りの速度が比較的速いため、li は元の状態に戻れず、途中で止まってしまいますこれは、すべての li がタイマーを共有しているためです

マウスが最初の li に移動したら、startMove を呼び出して開始します。タイマー; マウスが移動したとき li を削除するときは、li が半分に達したときにタイマーを開始し、次に 2 番目の li に移動します。 liは途中で行き詰まってしまいます。

この問題を解決してください: 各 li に変更を制御するための独自のタイマーを持たせます

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

そして starMove で毎回使用されるタイマーは現在の李自身のものなので、お互いに干渉することはありません。

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

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

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

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

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

完全なjsコード

<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>

次に例を見てみましょう: マルチオブジェクトの動き - 透明度の変更

<script>
  window.onload = function () {
    var aImgs = document.getElementsByTagName(&#39;img&#39;);
    for(var i=0;i<aImgs.length;i++){
      aImgs[i].timer = null;
      aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性
      aImgs[i].onmouseover = function () {
        startMove(this,30);
      }
      aImgs[i].onmouseout = function () {
        startMove(this,100);
      }
    }
  }
  // var alpha = 100; 这里alpha在多物体运动里 不能公用
  function startMove(obj,iTarget) {
    clearInterval(obj.timer);
    var iSpeed = (iTarget - obj.alpha)/10;
      iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
    obj.timer = setInterval(function(){
      if(obj.alpha == iTarget){
        clearInterval(obj.timer);
      }else{
        obj.alpha += iSpeed;
        obj.style.opacity =obj.alpha/100;
        obj.style.filter = &#39;alpha(opacity:&#39;+obj.alpha+&#39;)&#39;;
      }
    },30);
  }
</script>

JSを使ったマルチオブジェクトの動作例を共有

関連記事