ウィンドウ表示効果を実現するJavaScript

この記事では、ウィンドウ表示効果を実現するための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;
}