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 のロード バランシングを実装する方法
推薦する
nginx における proxy_pass のさまざまな使用法の詳細な説明
目次プロキシ転送ルール最初のもの: 2番目のタイプ: 3番目のタイプ: 4番目のタイプ: 5番目:プ...
ubuntu20.04 LTSにdockerをインストールする方法
ゼロ: 古いバージョンをアンインストールするDocker の古いバージョンは、docker、dock...
Tomcat を設定して IntelliJ IDEA 2018 で最初の Java Web プロジェクトを実行する方法
1 Tomcatをダウンロードして起動する公式サイト http://tomcat.apache.or...
HTML と CSS を書くための 6 つの最も効果的な方法
この記事では、効率を向上させ、時間を節約することを願って、最も効果的な 6 つの方法を紹介します。 ...
画像ファイルの形式とその選択方法
1. どの 3 つの形式ですか?それぞれ、gif、jpg、png です。画像ファイルを最適化すること...
Mac 向け MySQL 5.7.17 のインストールと設定のチュートリアル
1. MySQLをダウンロードする公式サイトのダウンロードページをクリックすると次のページに入ります...
VUE ユニアプリの基本コンポーネントの簡単な紹介
1. スクロールビュー垂直スクロールを使用する場合は、固定の高さを指定して CSS で高さを設定する...
Windows Apache 環境で SSL 証明書を展開して、Web サイトを https 対応にする方法
SSL 証明書の使用についてはここでは説明しません。SSL 証明書を導入する必要がある友人は、すでに...
httpsウェブサイトにリファラーhttpsとhttpジャンプリファラーを送信させる方法
この記事では、HTTP プロトコルのリファラーのメタデータ パラメータの提案について説明します。この...
本をめくる効果を実現するネイティブJS
この記事では、ネイティブ JS で実装された本をめくる効果の図を紹介します。効果は次のとおりです。 ...
Docker で MySQL マスターとスレーブをデプロイする方法
画像をダウンロードMySQLイメージの選択 docker 検索 mysql MySQL 5.7 イメ...
CSS3で作られたレインボーボタンスタイル
結果： 実装コード: html <div class="buttons"&...
Windows Server 2012 でファイル サーバーを構築するための詳細な手順
ファイル サーバーは、企業内で最も一般的に使用されるサーバーの一つであり、主にファイル共有を提供する...
エレメントアバターアップロード練習
この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...
JSはフロントエンドのページング効果を実現します
この記事の例では、フロントエンドのページング効果を実現するためのJSの具体的なコードを参考までに共有...