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 学習ノート: 完全な SELECT ステートメントの使用例と詳細な説明

この記事では、MySQL 学習ノートの select ステートメントの完全な使用方法を例を使用して説...

JavaScript 関数の高度な説明

目次関数定義方法関数呼び出し(6種類)これは問題を指摘している厳密モード高階関数閉鎖再帰: 自分自身...

MySQLの保存時間の不一致の問題を解決する

Java を使用してシステム時間を取得し、それを MySQL データベースに保存した後、時間タイプが...

JavaScriptのモジュール性を理解する方法

目次1. ブラウザのサポート2.エクスポートモジュールのエクスポート3. モジュールをインポートする...

tomcatでcatalina.outログをカットする3つの方法の詳細な説明

1. ログセグメンテーションのためのLog4j 1) log4j-1.2.17.jar、tomcat...

Docker Swarm クラスタ管理の使用と原理の分析

Swarm クラスター管理導入Docker Swarm は Docker 用のクラスター管理ツールで...

WeChatアプレットでグローバル変数を監視する方法

最近、仕事で問題に遭遇しました。グローバル変数 red_heart があります。これは多くの場所で使...

lnmp を使用して MySQL データベースのルート パスワードをリセットする 2 つの方法

最初の方法: Junge のワンクリック スクリプトを使用して、LNMP 環境で MYSQL データ...

キーフリーログインプロセスを実現するためのLinux構成の分析

1.sshコマンドLinux では、ssh コマンドを使用して別のサーバーにログインできます。 2 ...

MySQL 学習データベースバックアップの詳細な説明

目次1.DB、DBMS、SQL 2. データベースの特徴3. SQL分類4. MySQLを起動および...

Docker環境でJenkinsを設定すると、タスクをビルドするときにコンソールログに文字化けした中国語の文字が表示されます

目次1. 問題の説明: 2. Jenkins設定のトラブルシューティング3. コードログのエンコード...

MySQL トランザクション分析

取引トランザクションはビジネス ロジックの基本単位です。各トランザクションは一連の SQL ステート...

Zabbixは複数のmysqlプロセスの監視を実装します

1 つのサーバー上で 3 つの MySQL インスタンス プロセスが開始され、それぞれ異なるポート ...

Docker 実行時にユーザーとグループを管理する方法

Docker はプロセスを中核としてシステムリソースを分離する管理ツールです。分離は、オペレーティン...

ページングクリックコントロールを実装するネイティブJS

これは、ネイティブJSを使用してページングクリックコントロールを実装する必要がある面接の質問です。参...