js でショッピングモールのシミュレーションを実現

js でショッピングモールのシミュレーションを実現

HTML、CSS、JSフロントエンドを学習中の皆さん、今回はショッピングモールの事例の実装をシェアします!

準備段階:

ページに配置する必要のある画像、小さい画像とそれに対応する大き​​い画像をいくつか用意します。ブロガーは、小さい画像 (40 x 40) と大きい画像 (321 x 430) を例として使用します。

構造解析:

  • 大きな画像領域
  • サムネイルエリア
  • 国境地域全体

効果分析:

  • 小さい画像の上にマウスを置くと、それに応じて大きい画像が表示されます。
  • 小さな画像の上にマウスを置くと、対応する効果が得られます。
  • マウスを外側に動かすと、小さな境界線の対応する効果が消えます。

CSS を使用して境界線を設定します。

div タグを設定します (境界属性を設定します)。

#表示div{
         幅: 342ピクセル;
         高さ: 505px;
         境界線: 実線 1px ;
         境界線の半径: 10px;
     }

テーブルタグを設定します (境界線は不要で、上部から一定の距離があります)。

#た{
          マージン: 自動;
          上マージン: 5px;
      }

js を使用してページの動的効果を設定します。

マウス入力機能:

関数operInImg(img,src){
          //画像スタイルを設定します img.style.border="solid 1px blue";
          // 大きな画像の img パスを設定します // 大きな画像のパスを取得します var big = document.getElementById("big");
              //パスを設定します big.src=src;               
      }
      関数operOutImg(img){
          //画像スタイルを設定します img.style.border="";
      }

マウスアウト機能:

関数operOutImg(img){
          //画像スタイルを設定します img.style.border="";
      }

全体的なコード実装:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <!--js コード ドメインを宣言します -->
    <スクリプト>
        //写真をリンクしてスタイルを設定する関数を作成する function operInImg(img,src){
            //画像スタイルを設定します img.style.border="solid 1px blue";
            // 大きな画像の img パスを設定します // 大きな画像のパスを取得します var big = document.getElementById("big");
                //パスを設定します big.src=src;               
        }
        関数operOutImg(img){
            //画像スタイルを設定します img.style.border="";
        }


    </スクリプト>

    <!---CSS コードドメインを宣言します-->
    <スタイル>
        /*div スタイルを設定する*/
        #表示div{
            幅: 342ピクセル;
            高さ: 505px;
            境界線: 実線 1px ;
            境界線の半径: 10px;
        }
        /*表のスタイルを設定する*/
        #た{
            マージン: 自動;
            上マージン: 5px;
        }

    </スタイル>
    <title>タオバオ</title>
</head>
<本文>
     <div id="showdiv">
         <テーブルの幅="332px" 高さ = "440px" id="ta">
             <tr 高さ="300px">
                 <td colspan="5"><img src="./images/demo-big.jpg" alt="" id="big"></td>
             </tr>
             <tr 高さ="40px">
                 <td><img src="./images/demo01.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big01.jpg')" onmouseout="operOutImg(this)"></td>
                 <td><img src="./images/demo02.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big02.jpg')" onmouseout="operOutImg(this)"> </td>
                 <td><img src="./images/demo03.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big03.jpg')" onmouseout="operOutImg(this)"> </td>
                 <td><img src="./images/demo04.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big04.jpg')" onmouseout="operOutImg(this)"> </td>
                 <td><img src="./images/demo05.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big05.jpg')" onmouseout="operOutImg(this)"> </td>
             </tr>
         </テーブル>
     </div>
</本文>
</html>

結果:

読んでいただきありがとうございます。欠点があればご指摘いただければ幸いです。

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

以下もご興味があるかもしれません:
  • js は Xiaomi 公式サイトの画像カルーセルの特殊効果を模倣します
  • JavaScript が Xiaomi のカルーセル効果を模倣
  • JavaScript に基づくショッピング モールの商品カウントダウンの例
  • JavaScript はショッピングモールをシミュレートして画像広告カルーセルのサンプルコードを実装します
  • JavaScriptはXiaomi Mall公式サイトの完全なページ実装プロセスを模倣します

<<:  MySQL 5.7.23 のインストールと設定方法のグラフィックチュートリアル

>>:  Mysql でサーバーの UUID を変更する方法

推薦する

MySQL Server 8.0.13.0 インストールチュートリアル(画像とテキスト付き)

MySQL 6.1.3 をベースにした 8.0.13 をインストールします。 MySQL 8.0....

JavaScript を使用してページ要素のオフセットを取得/計算する方法

質問コントロールをクリックすると、コントロールの下にフローティング レイヤーが表示されます。通常の方...

JavaScriptスコープについての簡単な説明

目次1. 範囲1. グローバルな範囲2. ローカルスコープ2. 変数のスコープ1. グローバル変数2...

Tomcat セキュリティ仕様 (Tomcat セキュリティ強化と仕様)

tomcat はオープンソースの Web サーバーです。Tomcat ベースの Web は実行効率...

IE8 ベータ 1 には注意が必要な 2 つの領域があります

<br />関連記事: Web スキル: 複数の IE バージョンを共存させるソリューシ...

MySQL パーティション テーブルに関するパフォーマンス バグ

目次2. pt-pmapを使用したスタック分析3. このコラムのボトルネックポイントの分析4. パー...

MySQLメモリストレージエンジンに関する知識

メモリストレージエンジンに関する知識ポイントメモリ ストレージ エンジンは日常業務ではほとんど使用さ...

CSS Houdini でダイナミックな波効果を実現

CSS Houdini は、CSS 分野における最もエキサイティングなイノベーションとして知られてい...

CentOS8.0ネットワーク設定の実装

1. CentOS 7 と CentOS 8 のネットワーク構成の違い: VMware Workst...

JavaScript 関数構文の説明

目次1. 通常の機能2. 矢印関数3. データパケットJSON 4. オブジェクト5. 約束6. 非...

Vueプラグインの書き方を説明する記事

目次プラグインとはプラグインの作成プラグインの使用要約するプラグインとはVue フレームワークでは、...

MySQL 分離列とプレフィックスインデックスの使用の概要

目次データ列を分離するプレフィックスインデックスとインデックスの選択性データ列を分離するMySQL ...

Mysql の主キーと一意キーの違いのまとめ

主キーとは何ですか?主キーは、テーブル内の各タプル (行) を一意に識別するテーブル内の列です。主キ...

Zabbix で Windows のパフォーマンスを監視する方法

背景情報最近、Windows パフォーマンスに関する本を読み直しています。以前は SCOM 監視を使...