Taobao の商品画像切り替え効果を実現する JavaScript
|
JavaScriptの服装アルバム切り替え効果（Taobao商品画像切り替えに似ています）、参考までに、具体的な内容は次のとおりです。 では、早速コードを見てみましょう。
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>タイトル</title>
<スタイル タイプ="text/css">
#bigImg{
幅: 200ピクセル;
}
*{
パディング: 0;
マージン: 0;
}
ul{
リストスタイル: なし;
/*オーバーフロー: 非表示;*/
}
ul li{
フロート: 左;
幅: 46px;
高さ: 46px;
左マージン: 10px;
上マージン: 20px;
境界線: 2px 実線 #ffffff;
}
ul .アクティブ{
境界線の色: 赤;
}
</スタイル>
</head>
<本文>
<img src="img/cloth_01.jpg" id="bigImg">
<ul>
<li class="active">
<a href="">
<img src="img/cloth_01.jpg" width=46 class="smallImg">
</a>
</li>
<li>
<a href="">
<img src="img/cloth_02.jpg" width=46 class="smallImg">
</a>
</li>
<li>
<a href="">
<img src="img/cloth_03.jpg" width=46 class="smallImg">
</a>
</li>
<li>
<a href="">
<img src="img/cloth_04.jpg" width=46 class="smallImg">
</a>
</li>
<li>
<a href="">
<img src="img/cloth_05.jpg" width=46 class="smallImg">
</a>
</li>
</ul>
<!--JS 部分-->
<script type="text/javascript">
// 1. イベント ソースを取得します。 var bigImg = document.getElementById("bigImg");
var smallImgs = document.getElementsByClassName("smallImg");
(var i=0;i<smallImgs.length;i++){
// 2. コレクションを走査し、各imgタグにイベントを追加します。smallImgs[i].onmouseover = function (){
// 3. イベントハンドラ // 3.1 各liタグにホバーする前に、すべてのliタグのクラス名を空の値に設定します for (var j=0;j<smallImgs.length;j++){
smallImgs[j].parentNode.parentNode.setAttribute("class","");
}
// 3.2 大きな画像の src 属性値を変更します。var smallImgSrc = this.getAttribute("src");
bigImg.setAttribute("src",smallImgSrc);
// 3.3 マウスが置かれている img タグの親タグにクラスを追加します。this.parentNode.parentNode.setAttribute("class","active");
}
}
</スクリプト>
</本文>
</html>実装効果図:
デフォルトでは最初の画像が選択されます (大きな画像はデフォルトで最初の画像です)。マウスを対応する画像の上に置くと、大きな画像がその画像に切り替わります。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux で MySQL に接続するときに発生するエラーを解決する方法: ユーザー 'root'@'localhost' へのアクセスが拒否されました (パスワードの使用: YES)
>>: Docker Compose を使用して nginx のロード バランシングを実装する方法
推薦する
サーバー上の php-cgi.exe プロセスが多数存在し、CPU が 100% 占有される問題の解決方法
Windows 2003+IIS6 の fastcgi 構成ファイル fcgiext.ini を最適...
PXEを使用してLinuxシステムを自動的に展開する方法
目次背景DHCPの設定DHCP ファイル (動的ホスト構成プロトコル) の編集tftp 設定sysl...
HTMLインライン要素とブロックレベル要素の基本概念と使用例
HTML タグには、インライン要素とブロックレベル要素の 2 種類があります。まず、インライン要素と...
ウォーターフォールフローレイアウトを実装する3つの方法
序文今日、Xianyuを閲覧していたとき、各行の高さが同じではないことに気付きました。調べてみると、...
Vue+Websocketはチャット機能を実装するだけです
この記事では、チャット機能を簡単に実装するためのVue+Websocketの具体的なコードを参考まで...
Tomcat の文字化けしたコードとポート占有の解決方法について簡単に説明します
Tomcat サーバーは、無料でオープン ソースの Web アプリケーション サーバーです。軽量のア...
JavaScript を使用してページ要素のオフセットを取得/計算する方法
質問コントロールをクリックすると、コントロールの下にフローティング レイヤーが表示されます。通常の方...
Portainer を使用して複数の Docker コンテナ環境を管理する方法を説明します。
目次Portainerは複数のDockerコンテナ環境を管理します2. Dockerを管理する2.1...
MySql バッチ挿入の最適化 SQL 実行効率の例の詳細な説明
MySql バッチ挿入の最適化 SQL 実行効率の例の詳細な説明itemcontractprice ...
Linux システムのデュアル ネットワーク カード バインディング構成の実装
システムバージョン [root@ ~]# cat /etc/redhat-release CentO...
CocosCreator ユニバーサルフレームワークデザインネットワーク
目次序文Websocketの使用Websocketオブジェクトの構築Websocket ステータスW...
JavaScript キャンバスで 9 マスのグリッドカットの効果を実現
この記事では、9グリッドカット効果を実現するためのキャンバスの具体的なコードを紹介します。具体的な内...
JS for ループで setTimeout を使用する 4 つのソリューション
目次概要解決策 1: クロージャ解決策2: 構造を分割する解決策3：解決策4: setTimeout...
MySQL フラッシュリストとダーティページフラッシュメカニズム
1. レビューMySQL の起動後にバッファ プールが初期化されます。バッファ プールは N 個の空...
divとspanの違いと使い方
目次1. DIVとSPANの違いと特徴2. スパンタグの概要3. 拡大と改善4. 凡例の効果の実証例...