この記事では、ウィンドウ表示効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 1.まず足場を組む * { マージン: 0; パディング: 0; } 。箱 { 幅: 800ピクセル; 高さ: 190ピクセル; 境界線: 1px実線 #000; マージン: 100px 自動; } ul { リストスタイル: なし; ディスプレイ: フレックス; } ul画像{ 垂直方向の位置合わせ: 上; } 。進捗 { 幅: 100%; 高さ: 30px; 背景: #ccc; } .progress>.line { 幅: 100ピクセル; 高さ: 100%; 背景: オレンジ; 境界線の半径: 15px; } <div class="box"> <ul> <li> <img src="images/img1.jpg" alt=""> </li> <li> <img src="images/img2.jpg" alt=""> </li> <li> <img src="images/img3.jpg" alt=""> </li> <li> <img src="images/img4.jpg" alt=""> </li> <li> <img src="images/img5.jpg" alt=""> </li> <li> <img src="images/img6.jpg" alt=""> </li> <li> <img src="images/img7.jpg" alt=""> </li> <li> <img src="images/img8.jpg" alt=""> </li> <li> <img src="images/img9.jpg" alt=""> </li> <li> <img src="images/img10.jpg" alt=""> </li> </ul> <div class="進捗"> <div class="line"></div> </div> </div> 2. 論理部分 操作が必要な要素を取得する ulの幅を計算する ulの幅を設定する スクロールバーの幅を計算する スクロールバーの幅を設定する マウスクリックイベントをリッスンする
マウス移動イベントのリッスン
。箱 { オーバーフロー: 非表示; } ul { 位置: 相対的; } 。進捗 { 位置: 相対的; } .progress>.line { 位置: 絶対; 左: 0; 上: 0; } //1. 操作対象となる要素を取得します。const oUl = document.querySelector("ul"); const oItems = oUl.querySelectorAll("li"); const oProgress = document.querySelector(".progress"); const oLine = document.querySelector(".line"); const oBox = document.querySelector(".box"); //2. ulの幅を計算します。const ulWidth = oItems[0].offsetWidth * oItems.length; //3. ul の幅を設定します。oUl.style.width = ulWidth + 'px'; //4. スクロール バーの幅を計算します // スクロール バーの幅 / スクロール バーのスクロール範囲 = コンテナーの幅 / コンテンツの範囲 const progressWidth = oProgress.offsetWidth; 定数ボックス幅 = oBox.オフセット幅; const lineWidth = boxWidth / ulWidth * progressWidth; //5. スクロールバーの幅を設定します。oLine.style.width = lineWidth + 'px'; // スクロールバーの最大スクロール範囲を計算します。const maxLineX = progressWidth - lineWidth; // 画像の最大スクロール範囲を計算します。const maxImgX = boxWidth - ulWidth; //6. マウスが押されたイベントをリッスンする oLine.onmousedown = function(e) { e = e || ウィンドウ.e; //a. スクロールバーの現在の位置を取得します。let begin = parseFloat(oLine.style.left) || 0; //b. スクロールバーでマウスが押された位置を取得します。let mouseX = e.pageX - oBox.offsetLeft; //7. マウス移動イベントをリッスンする oLine.onmousemove = function(e) { e = e || ウィンドウ.e; //c. スクロールバー内でマウスを移動した後の位置を取得します。let moveMouseX = e.pageX - oBox.offsetLeft; //d. オフセットを計算します。let offsetX = moveMouseX - mouseX + begin; //e. 安全性チェック offsetX = offsetX < 0 ? 0 : offsetX; offsetX = offsetX > maxLineX ? maxLineX : offsetX; //f. スクロールバーの位置をリセットします。oLine.style.left = offsetX + 'px'; //g. 画像のスクロール距離を計算します // スクロールバーのスクロール距離 / スクロールバーの最大スクロール範囲 = 画像のスクロール距離 / 画像の最大スクロール範囲 // スクロールバーのスクロール距離 / スクロールバーの最大スクロール範囲 * 画像の最大スクロール範囲 = 画像のスクロール距離 const imgOffsetX = offsetX / maxLineX * maxImgX; // h. 画像の位置をリセットします oUl.style.left = imgOffsetX + "px"; }; }; document.onmouseup = 関数() { oLine.onmousemove = null; } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Docker での Redis の最も詳細なインストールと構成 (画像とテキスト付き)
この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。必要:...
展開環境:インストールバージョン Red Hat Cent 7.0 MYSQL バージョン 8.0....
目次1 はじめに2 トリガーの紹介3 トリガーを作成する4 トリガーを表示5. トリガーの削除6 結...
序文MySQL が SQL SELECT コマンドと WHERE 句を使用してテーブルからデータを読...
次のような効果がよく見られます。 そうです、ページ上でよく使われる「展開と折りたたみ」のインタラクシ...
MySQL proxies_priv(シミュレートされたロール)を使用して同様のユーザーグループ管理...
ゲーム史上最高スコアトップ100をチェックSQLコード cdb_playsgame ps から ps...
目次非同期トラバーサル非同期反復可能トラバーサル非同期反復生成非同期メソッドと非同期ジェネレーター非...
導入当社は、情報セキュリティと機密アプリケーションに関わるいくつかのプロジェクトの研究開発に従事して...
序文日常の開発では、サーバー上でさまざまなテキストやログの表示操作を実行する必要があることがよくあり...
のようにLIKE ではデータ全体が一致する必要がありますが、REGEXP では部分的な一致のみが必要...
MySQL は現在、ほとんどの企業や事業体で使用されているデータベースです。MySQL が使用される...
HTML メタタグHTML メタタグは、Web ページのコンテンツに関する情報をブラウザや検索エンジ...
データベースでは、UNION キーワードと UNION ALL キーワードの両方が 2 つの結果セッ...
この記事では主に、高さが不明な垂直方向の中央揃えを CSS で実装する方法を紹介し、皆さんと共有しま...