シームレスな画像スクロール効果を実現する js_javascript スキル-jsチュートリアル-php.cn

シームレスな画像スクロール効果を実現する js_javascript スキル

WBOY

リリース： 2016-05-16 15:19:14

オリジナル

1635 人が閲覧しました

まず、シームレススクロールの最初の重要なポイントは動きです。ページの要素ノードを移動させる方法については、JavaScript のタイマーに関する関連知識を学ぶ必要があります。

JS でタイマーを作成するには、setTimeout と setInterval の 2 つの方法があります。まず、これらは同じパラメータを受け取ります。最初のパラメータはタイマー実行の関数で、2 番目のパラメータはタイマーが関数を実行するまでのミリ秒数を表す数値です。両者の違いは、setTimeout は指定された時間の後に関数を 1 回だけ実行するのに対し、setInterval は指定された時間ごとに関数を実行することです。簡単に言うと、setInterval は setTimeout の循環バージョンです。

タイマーの別の使用法もあります。タイマーを削除することもできます。clearTimeout と ClearInterval という 2 つのメソッドがあり、それぞれ異なるタイプのタイマーに対応しています。さらに、タイマーによって返される値であるパラメーターを 1 つだけ受け取ります (Chrome でデバッグしたところ、戻り値はすべて数値であることがわかりました)。これは、どのタイマーを削除するかを指定するために使用されます。

タイマーの知識を習得した後、タイマーを使用して要素を動かす方法を分析し始めました。実際、これは映画の原理と似ており、要素が短時間で連続的に移動することを可能にします。要素の移動を引き起こす方法については、

などの JS を通じて要素のスタイルを変更することで実現できます。

oUl.style.left = oUl.offsetLeft + speed + 'px';

ログイン後にコピー

上記のコードでは、速度は毎回生成される変位です。速度を使用するのは非常に興味深いものです。速度の正と負の値を変更して、スクロールの方向を変更できます。

また、要素の属性 offsetLeft について、offsetLeft の値は自身の左位置と自身のマージンの和で決まること、offsetLeft は相対的な距離であることの 2 点に注意が必要だと個人的に思っています。それを含むレイヤーに追加します (offsetTop と同様)。もちろん、これはすべて私自身の理解であり、決して正確ではありませんが、この落とし穴を思い出して、次回具体的に解決してみます。

要素を動かす原理は基本的に次のとおりです。この画像のシームレスなスクロール表示の実装方法を分析してみましょう。原理はすべて左側にスクロールします。コード内で言及されています:

まず、ループ内でスクロールする必要がある画像が 4 つだけであると仮定します。画像をループ内でスクロールするという要件を満たすには、(1) に示すように画像をスクロールする必要があります。 >

このようにして、最初の写真 1 が境界線の外にスクロールすると、次の写真 1 が写真 4 の後ろに表示され、ループのように見えます~

画像が次の状況にスクロールすると:

スクロールを続けると、画像の後ろに空白のスペースができます。これは、円形スクロールの効果ではなくなります。実際、これは、画像が図 (2) の状況にスクロールするときの鍵でもあります。をクリックすると、図 (1) に示す状態に達したらスクロールを続けます。これにより、シームレスなループスクロール効果が作成されます。

さらに、プログラムを拡張して、マウスを画像内に移動するとスクロールを停止し、マウスを画像内に移動するとスクロールを継続するエフェクトを記述しました。これは、タイマーを削除することで実現されます。コードは非常に単純なので紹介しません。。また、スタイルを良くするために、すべての画像のサイズを 160*120 に設定しました。コードを実行するには、画像を自分で用意する必要があります。

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

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #div1{
      width: 640px;
      height: 120px;
      margin: 100px auto;
      background-color: #646464;
      position: relative;
      overflow: hidden;
    }
    #div1 ul{
      position:absolute;
      left:0;
      top:0;
      overflow: hidden;
      background-color: #3b7796;
    }

    #div1 ul li{
      float: left;
      width: 160px;
      height: 120px;
      list-style: none;
    }
  </style>

  <script>
    window.onload = function(){
      var oDiv = document.getElementById('div1');
      var oUl = document.getElementById('ul1');
      var speed = 2;//初始化速度

      oUl.innerHTML += oUl.innerHTML;//图片内容*2-----参考图（2）
      var oLi= document.getElementsByTagName('li');
      oUl.style.width = oLi.length*160+'px';//设置ul的宽度使图片可以放下

      var oBtn1 = document.getElementById('btn1');
      var oBtn2 = document.getElementById('btn2');


      function move(){
        if(oUl.offsetLeft<-(oUl.offsetWidth/2)){//向左滚动，当靠左的图4移出边框时
          oUl.style.left = 0;
        }

        if(oUl.offsetLeft > 0){//向右滚动，当靠右的图1移出边框时
          oUl.style.left = -(oUl.offsetWidth/2)+'px';
        }

        oUl.style.left = oUl.offsetLeft + speed + 'px';
      }

      oBtn1.addEventListener('click',function(){
        speed = -2;
      },false);
      oBtn2.addEventListener('click',function(){
        speed = 2;
      },false);

      var timer = setInterval(move,30);//全局变量 ，保存返回的定时器

      oDiv.addEventListener('mouseout', function () {
        timer = setInterval(move,30);
      },false);
      oDiv.addEventListener('mousemove', function () {
        clearInterval(timer);//鼠标移入清除定时器
      },false);
    }
  </script>
</head>
<body>
  <input id="btn1" type="button" value="向左">
  <input id="btn2" type="button" value="向右">
  <div id="div1">

    <ul id="ul1">
      <li><img src="img/img_1.jpg"></li>
      <li><img src="img/img_2.jpg"></li>
      <li><img src="img/img_3.jpg"></li>
      <li><img src="img/img_4.jpg"></li>
    </ul>
  </div>
</body>
</html>

ログイン後にコピー

上記は、js でシームレスなスクロール効果を実装するための詳細なコードです。皆さんの学習に役立つことを願っています。