この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL は低速クエリを可能にします (EXPLAIN SQL ステートメントの使用の概要)
>>: MySQL 実験: explain を使用してインデックスの傾向を分析する
MySQL ウィンドウ関数の紹介MySQL は MySQL 8.0 以降、ウィンドウ関数をサポートし...
序文Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインター...
商品を検索するときに、すべてのブランドまたは一部のブランドを表示するTaobaoの機能を真似してみま...
フロントエンドのクロスドメイン問題に2日間近く悩まされましたが、ようやくngnxを使って解決したので...
今日のタスク1. Linuxディストリビューションの選択2.vmwareが仮想マシン(centos)...
ReactライフサイクルReactのライフサイクルを理解するのに役立つ2つの図React ライフサイ...
目次1. インラインスタイル2. インポート方法を使用する3.cssモジュールのエクスポート4. ス...
序文会社の業務上のニーズにより、独自の MongoDB サービスを構築する予定です。MongoDB ...
この記事では、WindowsでのMySQL 8.0.12のインストール手順と使用方法のチュートリアル...
今日、PHP を学習する場合、当然ながら、まず実行環境をインストールする必要があります。Phpstu...
トイ・ストーリー3 オンラインマーケティングウェブサイトゼンモバイル鉄から鉄へスプラウトファンドバー...
原理ホバーしたときに要素に影を設定します: box-shadow で、通常とは異なるスタイルにします...
目次概要単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...
目次1. コンポーネントとは何ですか? 2. グローバルコンポーネントを作成する方法1 1. Vue...
プロジェクトを作成するWeChat開発者ツールでプロジェクトを作成し、言語でTypeScriptを選...