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 6.1.3 をベースにした 8.0.13 をインストールします。 MySQL 8.0....
質問コントロールをクリックすると、コントロールの下にフローティング レイヤーが表示されます。通常の方...
目次1. 範囲1. グローバルな範囲2. ローカルスコープ2. 変数のスコープ1. グローバル変数2...
tomcat はオープンソースの Web サーバーです。Tomcat ベースの Web は実行効率...
<br />関連記事: Web スキル: 複数の IE バージョンを共存させるソリューシ...
目次2. pt-pmapを使用したスタック分析3. このコラムのボトルネックポイントの分析4. パー...
メモリストレージエンジンに関する知識ポイントメモリ ストレージ エンジンは日常業務ではほとんど使用さ...
CSS Houdini は、CSS 分野における最もエキサイティングなイノベーションとして知られてい...
1. CentOS 7 と CentOS 8 のネットワーク構成の違い: VMware Workst...
目次1. 通常の機能2. 矢印関数3. データパケットJSON 4. オブジェクト5. 約束6. 非...
目次プラグインとはプラグインの作成プラグインの使用要約するプラグインとはVue フレームワークでは、...
目次データ列を分離するプレフィックスインデックスとインデックスの選択性データ列を分離するMySQL ...
主キーとは何ですか?主キーは、テーブル内の各タプル (行) を一意に識別するテーブル内の列です。主キ...
背景情報最近、Windows パフォーマンスに関する本を読み直しています。以前は SCOM 監視を使...
1.VirtualBoxソフトウェアをダウンロードしてインストールするまず、VirtualBox の...