ウィンドウ表示効果を実現する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 の最も詳細なインストールと構成 (画像とテキスト付き)

推薦する

Vueは時間カウントダウン機能を実装する

この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。必要:...

MySql8.0以降のバージョンでROOTパスワードを正しく変更する方法

展開環境:インストールバージョン Red Hat Cent 7.0 MYSQL バージョン 8.0....

MySQLデータベーストリガーの詳細な説明

目次1 はじめに2 トリガーの紹介3 トリガーを作成する4 トリガーを表示5. トリガーの削除6 結...

Mysql は null 値の first/last メソッドの例を実装します

序文MySQL が SQL SELECT コマンドと WHERE 句を使用してテーブルからデータを読...

ページ内のリストプルダウン効果を実現するための純粋なCSS

次のような効果がよく見られます。 そうです、ページ上でよく使われる「展開と折りたたみ」のインタラクシ...

Mysql 5.7.18 MySQL proxies_priv を使用して同様のユーザーグループ管理を実装する

MySQL proxies_priv(シミュレートされたロール)を使用して同様のユーザーグループ管理...

MYSQL サブクエリとネストされたクエリの最適化例の分析

ゲーム史上最高スコアトップ100をチェックSQLコード cdb_playsgame ps から ps...

ES9の新機能の詳細な説明: 非同期反復

目次非同期トラバーサル非同期反復可能トラバーサル非同期反復生成非同期メソッドと非同期ジェネレーター非...

SSMは、mysqlデータベースアカウントのパスワード暗号文ログイン機能を実装します。

導入当社は、情報セキュリティと機密アプリケーションに関わるいくつかのプロジェクトの研究開発に従事して...

Linux でテキストを表示するためのヒント (非常に実用的!)

序文日常の開発では、サーバー上でさまざまなテキストやログの表示操作を実行する必要があることがよくあり...

MYSQLパターンマッチングREGEXPの使用に関する一般的な話など

のようにLIKE ではデータ全体が一致する必要がありますが、REGEXP では部分的な一致のみが必要...

MySQLの論理アーキテクチャに関する深い理解

MySQL は現在、ほとんどの企業や事業体で使用されているデータベースです。MySQL が使用される...

HTML の META タグの使用に関するヒントの例

HTML メタタグHTML メタタグは、Web ページのコンテンツに関する情報をブラウザや検索エンジ...

MySQL における UNION と UNION ALL の基本的な使い方

データベースでは、UNION キーワードと UNION ALL キーワードの両方が 2 つの結果セッ...

CSS で高さが不明な垂直中央揃えを実装する

この記事では主に、高さが不明な垂直方向の中央揃えを CSS で実装する方法を紹介し、皆さんと共有しま...