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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSは長い画像を上下にスクロールする効果を実現します
  • JS画像のシームレスでスムーズなスクロールコード
  • jsは画像のシームレスなスクロールを実現します
  • js で実装された Flash スクロールおよび回転表示画像コード ジェネレーター
  • JS は div 内のテキストまたは画像の自動ループスクロール コードを実装します
  • div+cssレイアウトで画像の連続スクロールを実装するjsコード
  • js jquery で画像用の連続スクロール コードを作成しました
  • 画像ループスクロール効果を実現する JavaScript コード
  • 画像の水平スクロール効果を実現する JS サンプルコード
  • jsは画像の左右スクロール効果を実現します

<<:  MySQL は低速クエリを可能にします (EXPLAIN SQL ステートメントの使用の概要)

>>:  MySQL 実験: explain を使用してインデックスの傾向を分析する

推薦する

入力タイプ=テキスト値=str を使用するための不完全なソリューション

今日、非常に奇妙な問題に遭遇しました。次のコードを見てください。 SimpleDateFormat ...

MySQL DEFINER の使用方法の詳細な説明

目次序文: 1.DEFINERの簡単な紹介2. いくつかの注意点要約:序文: MySQL データベー...

MySQL LOAD_FILE() 関数メソッドの概要

MySQL では、LOAD_FILE() 関数はファイルを読み取り、その内容を文字列として返します。...

MySQL で binlog を使用する際のフォーマットの選択方法

目次1. binlogの3つのモード1.ステートメントレベルモード2. 行レベルモード3. 混合モー...

jQueryはシンプルなコメントエリアを実装します

この記事では、参考までに、簡単なコメントエリアを実装するためのjQueryの具体的なコードを紹介しま...

MySQL ステートメントコメントの紹介

MySQL は次の 3 種類のコメントをサポートしています。 1. 行末の「#」文字から。 2. 「...

Docker swarm を使用して Nebula Graph クラスターを迅速にデプロイする方法のチュートリアル

1. はじめにこの記事では、Docker Swarm を使用して Nebula Graph クラスタ...

SQL重複排除方法の概要

SQL を使用してデータを抽出する場合、テーブル内で重複した値に遭遇することがよくあります。たとえ...

IISとAPACHEはHTTPSへのHTTPリダイレクトを実装しています

7 のMicrosoft の公式 Web サイトから HTTP Rewrite モジュールをダウンロ...

シンプルなページカウントダウンを実現するJavaScript

この記事では、参考までに、シンプルなページカウントダウンを実装するためのJavaScriptの具体的...

JavaScript コードを省略する一般的な方法の概要

目次序文矢印関数一般的な配列操作をマスターするスプレッド演算子オブジェクトの省略形構造化割り当てデー...

水平ヒストグラムを作成するための MySQL ソリューション

序文ヒストグラムは、RDBMS によって提供される基本的な統計情報です。最も一般的に使用されるのは、...

背景画像にテキストを表示するためのCSS

効果: <div class="imgs"> <!-- 背景画...

Mysql トランザクションで Update を実行するとテーブルがロックされますか?

2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレー...

Ubuntu 20.04 デスクトップのインストールとルート権限の有効化および SSH インストールの詳細

記事は主にUbuntu 20.04の簡単なインストールプロセスを記録し、インストール後に国内ソースを...