この記事では、ウィンドウ表示効果を実現するための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 の最も詳細なインストールと構成 (画像とテキスト付き)
Alibaba Cloud Image Repositoryを使用して外部イメージをダウンロードする...
目次1. 小道具2..同期3.vモデル4.参照5. $emit/v-on 6. $attrs/$li...
この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...
1. <div></div> と <span></spa...
序文最近、私は夜に時間を取って「CSS World」という本を読んでいます。この本は非常に興味深く、...
目次外部キーテーブルの関係を決定する方法テーブル関係を作成する方法1対多の関係 - 従業員テーブルと...
「nofollow」タグは数年前に Google、Yahoo、Microsoft によって提案されま...
x-ua-compatible は、IE ブラウザがページを解析およびコンパイルするためのモデルを...
CSS のモジュール ソリューションは、JS のモジュール ソリューションと同じくらい多く存在すると...
1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...
この記事では主に、MySQL 8.0 ドライバーと Alibaba Druid バージョン間の互換性...
問題の説明: Macを購入し、初めてMySQLをインストールしました。初期パスワードが分かりません。...
まずMySQLの公式ドキュメントを見てみましょう: 5.7 {データベース | スキーマ} を作成 ...
現在、MySQL の最適化について学習しています。この記事では、データ型とスキーマの最適化について紹...
最近、仕事中に問題が発生しました。Docker コンテナがホストの redis にアクセスできず、t...