JavaScript で長い画像のスクロール効果を実装する

この記事では、JavaScriptの長い画像スクロールの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

長い画像のスクロールにはタイマーがかかります。

まずタイマーを確認しましょう:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイマーレビュー</title>
</head>
<本文>
    <button id="start">開始</button>
    <button id="stop">閉じる</button>
    <script type="text/javascript">
        var start = document.getElementById("start");
        var stop = document.getElementById("stop");
        var num = 0、タイマー = null;

        start.onclick = 関数 (){
            // タイマーを使用する場合は、まず元のタイマーをクリアしてからオンにします。以下の clearInterval(timer); をコメントアウトしてから、オンにするボタンを複数回クリックして、効果を比較してみてください。 clearInterval(timer);
            タイマー = setInterval(関数(){
                数値++;
                console.log(数値);
            },1000)
        }
        stop.onclick = 関数 (){
            タイマーの間隔をクリアします。
        }
    </スクリプト>
</本文>
</html>

タイマーの内容を確認した後、長い画像のスクロールのコードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>長い画像のスクロール効果</title>
    <スタイル>
        *{
            パディング: 0;
            マージン: 0;
        }
        体{
   背景色: #000;
  }
        ＃箱{
   幅: 658ピクセル;
   高さ: 400px;
   境界線: 1px 実線 #ff6700;
   マージン: 100px 自動;
   オーバーフロー: 非表示;
   位置: 相対的;
  }
        #ボックス画像{
   位置: 絶対;
   上: 0;
   左: 0;
  }
        #ボックススパン{
            位置: 絶対;
            幅: 100%;
            高さ: 50%;
            左: 0;
            カーソル: ポインタ;
        }
        #ボックス #トップ{
   上: 0;
  }
  #ボックス #下部{
   下部: 0;
  }
    </スタイル>
</head>
<本文>
    <div id="ボックス">
        <img src="img/timer.jpeg" alt="">
        <span id="top"></span>
        <span id="bottom"></span>
    </div>
    <script type="text/javascript">
        // 1. イベント ソースを取得します。var box = document.getElementById('box');
  var pic = document.getElementsByTagName('img')[0];
  var divTop = document.getElementById('top');
  var divBottom = document.getElementById('bottom');

        // 2. イベントを追加します。var num = 0、timer = null;
        divBottom.onmouseover = 関数 () {
            // 以前の加速効果をクリアします clearInterval(timer);
   // 画像を下にスクロールさせる timer = setInterval(function () {
     数値 -= 10;
     // この -3666 は画像に応じて調整されます if (num >= -3666) {
     pic.style.top = num + 'px';
    }それ以外{
     タイマーの間隔をクリアします。
    }
   },50);
  }
  divTop.onmouseover = 関数 () {
   タイマーの間隔をクリアします。
   // 画像を上にスクロールさせる timer = setInterval(function () {
     数値 += 10;
    if(数値 <= 0){
     pic.style.top = num + 'px';
    }それ以外{
     タイマーの間隔をクリアします。
    }
   },100);
  }
  // マウスが離れたらスクロールを停止する box.onmouseout = function () {
   タイマーの間隔をクリアします。
  }
    </スクリプト>
</本文>
</html>

効果の写真はここには載せませんが、必要なら自分で試してみてください（長い写真を見つけるのを忘れないでください）

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: