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 のロード バランシングを実装する方法
推薦する
ブラウザタブの左端に表示されるウェブサイトのアイコンを設定します
この文の目的は何ですか?コードをコピーコードは次のとおりです。 <link rel="...
Vue のスロットスコープの詳細な理解（初心者向け）
Baidu には slot-scope に関する記事が既にたくさんありますが、以前よく学習しておら...
Linux での Nginx 監視の問題
nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...
画像ボタンをフォームのリセットボタンとして使用する方法
フォームを作成するときに、送信ボタンとリセットボタンを配置することがよくあります。ページの外観を考慮...
MySql はデータを正常に挿入しますが、[Err] 1055 エラーが報告されます。解決策
1. 質問:最近、挿入操作を行っています。MySQLのバージョンは5.7です。挿入は成功しますが、エ...
HTML で入力プロンプトのテキスト スタイルを変更するためのサンプル コード
多くのウェブサイトでは、入力ボックスにヒントテキストが表示されています。入力ボックスにヒントテキスト...
ラムダ式の原則と例
ラムダ式ラムダ式 (クロージャとも呼ばれる) は、Java 8 のリリースを推進した最も重要な新機能...
mysql5.7.17.msi インストール グラフィック チュートリアル
mysql-5.7.17.msiのインストール、スクリーンショットに従ってください、ステップバイステ...
CSS フレックスレイアウトのリストの最後の行を左揃えにする N 通りの方法 (要約)
張新旭氏の記事を引用して皆さんにシェアしたいと思います。 変更を加えたい場合は、対応する画像によって...
ApplicationHost.config (IIS ストレージ構成領域ファイル) の概要
新しく作成された Web サイトの場合は、ASP.NET MVC5 を例に挙げます。セッションを処理...
Docker で Rancher をデプロイする方法 (落とし穴なし)
操作前に必ずお読みください:注意：管理に rancher を使用する場合は、k8s クラスターが構築...
vue+element テーブルで動的な列フィルタリングを実装するためのサンプルコード
要件: データをリスト形式で表示する場合、表示すべき情報項目が多く、表が横に長くなってしまいます。表...
ウェブサイトデザインの基礎知識：初心者の方はぜひお読みください
今では多くの人がウェブサイト作成に参加していますが、ウェブサイトはどのように作成すればよいのでしょう...
ウェブサイトを黒、白、グレーにする4つのコードの詳細な説明
2008年5月12日に四川省汶川市で発生した地震により、多くの命が失われ、遺憾なことと存じます。国務...
MySQL 8.0.22 の最新バージョンのダウンロードとインストールの超詳細なチュートリアル (Windows 64 ビット)
目次序文1. 公式サイトからMySQL 8.0.22をダウンロードする2. 環境変数を設定する3. ...