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

ウィンドウ表示効果を実現する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;
} 

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • ウィンドウ表示効果を実現するjs
  • JSが商品ウィンドウの特殊効果を実現

<<:  CSS ロリポップを描くサンプルコード

>>:  Docker での Redis の最も詳細なインストールと構成 (画像とテキスト付き)

推薦する

Alibaba Cloud イメージリポジトリを使用して外部 Docker イメージを構築する方法の詳細な説明

Alibaba Cloud Image Repositoryを使用して外部イメージをダウンロードする...

Vue2 における 12 種類のコンポーネント通信

目次1. 小道具2..同期3.vモデル4.参照5. $emit/v-on 6. $attrs/$li...

Win10 での MySQL 8.0.15 のインストールと設定のグラフィック チュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...

CSS の inline-block の最小幅値の詳細な説明

序文最近、私は夜に時間を取って「CSS World」という本を読んでいます。この本は非常に興味深く、...

MySQL 外部キー制約とテーブル関係の概要

目次外部キーテーブルの関係を決定する方法テーブル関係を作成する方法1対多の関係 - 従業員テーブルと...

Nofollowタグの書き方と使い方

「nofollow」タグは数年前に Google、Yahoo、Microsoft によって提案されま...

1 行のコードでさまざまな IE 互換性の問題を解決します (IE6-IE10)

x-ua-compatible は、IE ブラウザがページを解析およびコンパイルするためのモデルを...

CSS モジュールソリューション

CSS のモジュール ソリューションは、JS のモジュール ソリューションと同じくらい多く存在すると...

MySql テーブル、データベース、シャーディング、パーティショニングの知識の詳細な説明

1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...

MySQL 8.0ドライバとAlibaba Druidバージョン間の互換性の問題を解決

この記事では主に、MySQL 8.0 ドライバーと Alibaba Druid バージョン間の互換性...

MAC で MySQL の初期パスワードを変更する方法

問題の説明: Macを購入し、初めてMySQLをインストールしました。初期パスワードが分かりません。...

MySQLデータベースを作成し、中国語の文字をサポートする方法

まずMySQLの公式ドキュメントを見てみましょう: 5.7 {データベース | スキーマ} を作成 ...

MySQL のデータ型とスキーマの最適化の詳細な説明

現在、MySQL の最適化について学習しています。この記事では、データ型とスキーマの最適化について紹...

Dockerコンテナがホストポートにアクセスできない場合の解決策

最近、仕事中に問題が発生しました。Docker コンテナがホストの redis にアクセスできず、t...