この記事では、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 を使用してインデックスの傾向を分析する
今日、非常に奇妙な問題に遭遇しました。次のコードを見てください。 SimpleDateFormat ...
目次序文: 1.DEFINERの簡単な紹介2. いくつかの注意点要約:序文: MySQL データベー...
MySQL では、LOAD_FILE() 関数はファイルを読み取り、その内容を文字列として返します。...
目次1. binlogの3つのモード1.ステートメントレベルモード2. 行レベルモード3. 混合モー...
この記事では、参考までに、簡単なコメントエリアを実装するためのjQueryの具体的なコードを紹介しま...
MySQL は次の 3 種類のコメントをサポートしています。 1. 行末の「#」文字から。 2. 「...
1. はじめにこの記事では、Docker Swarm を使用して Nebula Graph クラスタ...
SQL を使用してデータを抽出する場合、テーブル内で重複した値に遭遇することがよくあります。たとえ...
7 のMicrosoft の公式 Web サイトから HTTP Rewrite モジュールをダウンロ...
この記事では、参考までに、シンプルなページカウントダウンを実装するためのJavaScriptの具体的...
目次序文矢印関数一般的な配列操作をマスターするスプレッド演算子オブジェクトの省略形構造化割り当てデー...
序文ヒストグラムは、RDBMS によって提供される基本的な統計情報です。最も一般的に使用されるのは、...
効果: <div class="imgs"> <!-- 背景画...
2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレー...
記事は主にUbuntu 20.04の簡単なインストールプロセスを記録し、インストール後に国内ソースを...