jQueryを使用して、マウスを製品の小さな画像の上にスライドさせたときに、対応する大きな画像を表示する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQueryを使用して、マウスを製品の小さな画像の上にスライドさせたときに、対応する大きな画像を表示する方法

php中世界最好的语言

Jun 01, 2018 pm 05:43 PM

jquery 成し遂げるねずみ

今回は、商品の小さい画像の上にマウスを乗せると、対応する大きい画像を表示するjQueryの操作方法を説明します。以下は実際のケースです。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery图片变换</title>
</head>
<style type="text/css">
 .show{width:330px; height:auto; margin:50px auto; background:#eee}
 .item{background:#fff; width:300px; height:auto; float:left; margin:15px;}
 p{ padding:15px; color:#ff6600}
 .big-photo img{ width:300px; height:300px; border:1px solid #e0e0e0}
 .des-small img{ width:30px; height:30px;border:1px solid #e0e0e0; }
 .des-small img:hover{ border:1px solid #ff6600}
 .clear{clear:both}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
 $(function() {
  /** 更换小图片 */
  $(".item a").hover(function(){
   changeImg($(this))
  }); 
 });
 function changeImg(obj){
  if(obj.find("img").attr("alt")=="small"){
   var temp_big_src = obj.siblings('a').find('img[alt=big]').attr('src');
   var temp_big_url = obj.siblings('a[class=big-photo]').attr('href');
   var temp_small_src = obj.find('img').attr('src');
   var temp_small_url = obj.attr('href');
   obj.siblings('a').find('img[alt=big]').attr('src',temp_small_src);
  }
 }
</script>
<body>
 <p class="show">
  <p>Jquery实现鼠标移动/移过到商品小图片上时替换掉大图片上的图片</p>
  <p class="item">
   <a class="big-photo">
    <img src="WR_00001.jpg" alt="big"/>
   </a>
   <a class="des-small">
    <img src="WR_00002.jpg" alt="small"/>
   </a>
   <a class="des-small">
    <img src="WR_00003.jpg" alt="small"/>
   </a>
   <a class="des-small">
    <img src="WR_00004.jpg" alt="small"/>
   </a>
  </p>
  <p class="clear"></p>
 </p>
</body>
</html>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Node.js ファイルのエンコード形式変換方法のまとめ

vue アプリケーション ueditor を使用してアップロードボタンをカスタマイズする方法

以上がjQueryを使用して、マウスを製品の小さな画像の上にスライドさせたときに、対応する大きな画像を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7683

Java チュートリアル

1639

CakePHP チュートリアル

1393

Laravel チュートリアル

1286

PHP チュートリアル

1229

Related knowledge

HP、Professional 1 3モードソフトマウスを発売：4000DPI、Blue Shadow RAW3220、初期価格99元 Apr 01, 2024 am 09:11 AM

3月31日のこのウェブサイトのニュースによると、HPは最近JD.comでProfessor1 3モードBluetoothマウスを発売し、黒と白のミルクティー色があり、初期価格は99元で、保証金10元が必要です。報道によると、このマウスは重さ106グラム、人間工学に基づいたデザインを採用し、寸法127.02x79.59x51.15mm、オプションで7つの4000DPIレベルがあり、Blue Shadow RAW3220センサーを搭載し、650mAhのバッテリーを使用することができるとのことです。 1回の充電で2か月使用可能。このサイトに添付されているマウスパラメータ情報は次のとおりです。

Razer | Pokémon Gengar ワイヤレスマウスとマウスパッドが登場、セット価格は 1,549 元 Jul 19, 2024 am 04:17 AM

7 月 12 日のこのサイトのニュースによると、Razer は本日、Razer|Pokémon Gengar ワイヤレスマウスとマウスパッドの発売を発表しました。単品価格はそれぞれ1,299元、299元、2製品を含むパッケージ価格は1,549元。 Razer が Gengar と提携した周辺機器製品を発売するのはこれが初めてではありません。2023 年に Razer は Gengar スタイルの Yamata Orochi V2 ゲーミングマウスを発売しました。今回発売される2商品は、いずれもゴースト、ゴースト、ゲンガーの姿をイメージした濃い紫色を基調に、その3匹のポケモンとモンスターボールの輪郭がプリントされており、中央にキャラクターのゲンガーが描かれている。古典的なゴーストタイプのポケモンの大きくてカラフルな画像。このサイトでは、Razer|Pokémon Gengar ワイヤレスマウスが、以前にリリースされた Viper V3 Professional Edition に基づいていることがわかりました。全体の重量は 55g で、Razer の第 2 世代 FOC を搭載しています。

VGN との提携ブランド「Elden's Circle」キーボードおよびマウスシリーズ製品が店頭に並びました: Lani / Faded One カスタムテーマ、99 元から Aug 12, 2024 pm 10:45 PM

8月12日のこのサイトのニュースによると、VGNは8月6日に、Lani/Faded Oneのカスタマイズされたテーマでデザインされたキーボード、マウス、マウスパッドを含む共同ブランドの「Elden Ring」キーボードおよびマウスシリーズを発売しました。の製品はJD.comに掲載されており、価格は99元からです。このサイトに添付されている共同ブランドの新製品情報は次のとおりです。 VGN丨Elden Law Ring S99PRO キーボードこのキーボードは、純粋なアルミニウム合金シェルを使用し、5 層サイレンサー構造によって補完され、GASKET 板バネ構造を使用し、単一の- キースロット付き PCB、独自の高さの PBT 素材キーキャップ、アルミニウム合金のパーソナライズされたバックプレーン、VHUB に接続された 3 つのモード接続と SMARTSPEEDX 低遅延テクノロジーをサポートし、549 元から複数のデバイスをワンストップで管理できます。 VGN丨Elden French Ring F1PROMAX ワイヤレスマウスマウス

Razer マウスドライバーはどのフォルダーにありますか? Mar 02, 2024 pm 01:28 PM

多くのユーザーは、Razer ドライバーによってインストールされたファイルがどこに行くのか知りません。これらのドライバーファイルは、通常、コンピューターの C ドライブであるシステムディスクにインストールされます。特定の場所は、programfile の RAZE フォルダーにあります。 Razer マウスドライバーはどのフォルダーにありますか? A: システム C ドライブの Programfiles の下の RAZE フォルダーにあります。通常、ドライバーは C ドライブにインストールされます。場所に応じて見つけてください。 Razer マウスドライバーのインストール方法の紹介 1. 公式 Web サイトからファイルをダウンロードした後、ダウンロードした EXE ファイルをダブルクリックして実行します。 2. ソフトウェアがロードされるまで待ちます。 3. ここで、インストールするドライバーを選択できます。 4. 選択後、右下の「インストール」をクリックします。

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか? Mar 24, 2024 am 11:27 AM

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?ソーシャルメディアの台頭により、WeChatは人々の日常生活に欠かせないコミュニケーションツールの1つになりました。ただし、多くの人は、同じ携帯電話で同時に複数の WeChat アカウントにログインするという問題に遭遇する可能性があります。 Huawei 社の携帯電話ユーザーにとって、WeChat の二重ログインを実現することは難しくありませんが、この記事では Huawei 社の携帯電話で WeChat の二重ログインを実現する方法を紹介します。まず第一に、ファーウェイの携帯電話に付属するEMUIシステムは、デュアルアプリケーションを開くという非常に便利な機能を提供します。アプリケーションのデュアルオープン機能により、ユーザーは同時に

PHP プログラミングガイド: フィボナッチ数列を実装する方法 Mar 20, 2024 pm 04:54 PM

プログラミング言語 PHP は、さまざまなプログラミングロジックやアルゴリズムをサポートできる、Web 開発用の強力なツールです。その中でも、フィボナッチ数列の実装は、一般的で古典的なプログラミングの問題です。この記事では、PHP プログラミング言語を使用してフィボナッチ数列を実装する方法を、具体的なコード例を添付して紹介します。フィボナッチ数列は、次のように定義される数学的数列です。数列の最初と 2 番目の要素は 1 で、3 番目の要素以降、各要素の値は前の 2 つの要素の合計に等しくなります。シーケンスの最初のいくつかの要素

Colorful が M900 Pro ワイヤレスゲーミングマウスを発売: 右手用人間工学に基づいた形状、8K Nano レシーバー、199 元から Mar 23, 2024 pm 05:16 PM

3月22日の当ウェブサイトのニュースによると、Deluxは人間工学に基づいた右利き用形状のワイヤレスゲーミングマウス「M900Pro」を発売し、初回先行販売価格は199元からとなっている。カラフルな M900Pro は、右利き用の人間工学に基づいて設計されており、中程度から大きな手を持つユーザー向けに作られており、重量は 63 g で、マット UV コーティングがスプレーされています。マウスはPAW3395センサーを使用し、オリジナルのNanoレシーバーは8000Hzのワイヤレスリターンレートをサポートし、Huannuoブルーシェルピンクドットマイクロムーブメントを搭載し、RGB充電ベースと滑り止めステッカーが標準装備されています。さらに、LOD調整、フルキーカスタマイズ、カスタムリップルコントロール、直線補正などの機能にも対応しており、PTFEフットパッド、1.6mのパラコードコード、内蔵レシーバー収納部を備えています。このサイトでは、このマウスの具体的なパラメータを次のようにまとめています。色: 黒、白、赤

Huawei携帯電話にWeChatクローン機能を実装する方法 Mar 24, 2024 pm 06:03 PM

Huawei 携帯電話に WeChat クローン機能を実装する方法ソーシャルソフトウェアの人気と人々のプライバシーとセキュリティの重視に伴い、WeChat クローン機能は徐々に人々の注目を集めるようになりました。 WeChat クローン機能を使用すると、ユーザーは同じ携帯電話で複数の WeChat アカウントに同時にログインできるため、管理と使用が容易になります。 Huawei携帯電話にWeChatクローン機能を実装するのは難しくなく、次の手順に従うだけです。ステップ 1: 携帯電話システムのバージョンと WeChat のバージョンが要件を満たしていることを確認するまず、Huawei 携帯電話システムのバージョンと WeChat アプリが最新バージョンに更新されていることを確認します。

See all articles

jQueryを使用して、マウスを製品の小さな画像の上にスライドさせたときに、対応する大きな画像を表示する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

jQueryを使用して、マウスを製品の小さな画像の上にスライドさせたときに、対応する大き​​な画像を表示する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

jQueryを使用して、マウスを製品の小さな画像の上にスライドさせたときに、対応する大きな画像を表示する方法