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 を使用してインデックスの傾向を分析する

推薦する

Mysql8.0はソート問題を解決するためにウィンドウ関数を使用する

MySQL ウィンドウ関数の紹介MySQL は MySQL 8.0 以降、ウィンドウ関数をサポートし...

Nginx を使用してフロントエンドのクロスドメイン問題を解決する方法

序文Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインター...

jQueryはHTML要素の非表示と表示を実装します

商品を検索するときに、すべてのブランドまたは一部のブランドを表示するTaobaoの機能を真似してみま...

Nginx がフロントエンド リソースへのクロスドメイン アクセスの問題をどのように解決するかの詳細な説明

フロントエンドのクロスドメイン問題に2日間近く悩まされましたが、ようやくngnxを使って解決したので...

VMware および CentOS システムのインストール方法 - ルート パスワードをリセットする

今日のタスク1. Linuxディストリビューションの選択2.vmwareが仮想マシン(centos)...

面接官はReactのライフサイクルについてよく質問します

ReactライフサイクルReactのライフサイクルを理解するのに役立つ2つの図React ライフサイ...

ReactでCSSをエレガントに書く方法

目次1. インラインスタイル2. インポート方法を使用する3.cssモジュールのエクスポート4. ス...

Docker はクラスター MongoDB 実装手順を構築します

序文会社の業務上のニーズにより、独自の MongoDB サービスを構築する予定です。MongoDB ...

Windows での MySQL 8.0.12 のインストール手順と基本的な使用方法のチュートリアル

この記事では、WindowsでのMySQL 8.0.12のインストール手順と使用方法のチュートリアル...

グリーンスタイルのウェブデザイン作品18点の最新コレクション

トイ・ストーリー3 オンラインマーケティングウェブサイトゼンモバイル鉄から鉄へスプラウトファンドバー...

マウスがカード上に移動したときにフローティング効果を実現する CSS の使用例

原理ホバーしたときに要素に影を設定します: box-shadow で、通常とは異なるスタイルにします...

JS で単一ファイルコンポーネントを実装する方法

目次概要単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...

Vueコンポーネントの作成方法と使用方法を説明する記事

目次1. コンポーネントとは何ですか? 2. グローバルコンポーネントを作成する方法1 1. Vue...

Typescriptを使用してWeChatミニプログラムでプロジェクトを作成する方法

プロジェクトを作成するWeChat開発者ツールでプロジェクトを作成し、言語でTypeScriptを選...