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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.23 のインストールと設定方法のグラフィックチュートリアル
この記事では、MySQL 学習ノートの select ステートメントの完全な使用方法を例を使用して説...
目次関数定義方法関数呼び出し(6種類)これは問題を指摘している厳密モード高階関数閉鎖再帰: 自分自身...
Java を使用してシステム時間を取得し、それを MySQL データベースに保存した後、時間タイプが...
目次1. ブラウザのサポート2.エクスポートモジュールのエクスポート3. モジュールをインポートする...
1. ログセグメンテーションのためのLog4j 1) log4j-1.2.17.jar、tomcat...
Swarm クラスター管理導入Docker Swarm は Docker 用のクラスター管理ツールで...
最近、仕事で問題に遭遇しました。グローバル変数 red_heart があります。これは多くの場所で使...
最初の方法: Junge のワンクリック スクリプトを使用して、LNMP 環境で MYSQL データ...
1.sshコマンドLinux では、ssh コマンドを使用して別のサーバーにログインできます。 2 ...
目次1.DB、DBMS、SQL 2. データベースの特徴3. SQL分類4. MySQLを起動および...
目次1. 問題の説明: 2. Jenkins設定のトラブルシューティング3. コードログのエンコード...
取引トランザクションはビジネス ロジックの基本単位です。各トランザクションは一連の SQL ステート...
1 つのサーバー上で 3 つの MySQL インスタンス プロセスが開始され、それぞれ異なるポート ...
Docker はプロセスを中核としてシステムリソースを分離する管理ツールです。分離は、オペレーティン...
これは、ネイティブJSを使用してページングクリックコントロールを実装する必要がある面接の質問です。参...