怎样操作jQuery实现鼠标滑过商品小图片上显示对应大图片
这次给大家带来怎样操作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中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci 怎样操作jQuery实现鼠标滑过商品小图片上显示对应大图片. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
HP melancarkan tetikus lembut tiga mod Profesor 1: 4000DPI, Blue Shadow RAW3220, harga awal 99 yuan
Apr 01, 2024 am 09:11 AM
Menurut berita dari laman web ini pada 31 Mac, HP baru-baru ini melancarkan tetikus Bluetooth tiga mod Professor1 di JD.com, tersedia dalam warna teh susu hitam dan putih. Harga awal ialah 99 yuan, dan deposit sebanyak 10 yuan diperlukan. Menurut laporan, tetikus ini mempunyai berat 106 gram, menggunakan reka bentuk ergonomik, berukuran 127.02x79.59x51.15mm, mempunyai tujuh tahap 4000DPI pilihan, dilengkapi dengan sensor Blue Shadow RAW3220, dan menggunakan bateri 650 mAh dikatakan boleh digunakan dengan sekali caj 2 bulan. Maklumat parameter tetikus yang dilampirkan pada tapak ini adalah seperti berikut:
Razer |. Tetikus tanpa wayar dan pad tetikus Pokémon Gengar kini tersedia, dengan harga ditetapkan 1,549 yuan
Jul 19, 2024 am 04:17 AM
Menurut berita dari laman web ini pada 12 Julai, Razer hari ini mengumumkan pelancaran pad tetikus dan tetikus tanpa wayar Razer|Pokémon Gengar. Harga produk tunggal ialah 1,299 yuan dan 299 yuan, dan harga pakej termasuk kedua-dua produk ialah 1,549 yuan. Ini bukan kali pertama Razer melancarkan produk persisian jenama bersama Gengar pada 2023, Razer melancarkan tetikus permainan Yamata Orochi V2 gaya Gengar. Kedua-dua produk baharu yang dilancarkan kali ini semuanya menggunakan latar belakang ungu gelap yang serupa dengan penampilan keluarga Ghost, Ghost, dan Gengar Mereka dicetak dengan garis besar tiga Pokémon dan Poké Balls ini, dengan watak Gengar di tengah imej besar dan berwarna-warni Pokémon jenis hantu klasik. Laman web ini mendapati bahawa tetikus tanpa wayar Razer|Pokémon Gengar adalah berdasarkan Viper V3 Edisi Profesional yang dikeluarkan sebelum ini. Berat keseluruhannya ialah 55g dan dilengkapi dengan FOC generasi kedua Razer
Produk siri papan kekunci dan tetikus 'Elden's Circle' jenama bersama VGN kini berada di rak: Tema tersuai Lani / Faded One, bermula dari 99 yuan
Aug 12, 2024 pm 10:45 PM
Menurut berita dari laman web ini pada 12 Ogos, VGN melancarkan siri papan kekunci dan tetikus "Elden Ring" berjenama bersama pada 6 Ogos, termasuk papan kekunci, tetikus dan pad tetikus, yang direka dengan tema tersuai bagi siri Lani/Faded One produk Ia telah diletakkan di JD.com, berharga dari 99 yuan. Maklumat produk baharu jenama bersama yang dilampirkan pada tapak ini adalah seperti berikut: Papan Kekunci VGN丨Elden Law Ring S99PRO Papan kekunci ini menggunakan cangkerang aloi aluminium tulen, ditambah dengan struktur penyenyap lima lapisan, menggunakan struktur spring daun GASKET, mempunyai satu PCB berslot kunci, dan bahan PBT tinggi asal, satah belakang diperibadikan aloi aluminium menyokong sambungan tiga mod dan teknologi kependaman rendah SMARTSPEEDX, ia boleh menguruskan berbilang peranti dalam satu hentian, bermula pada 549 yuan; VGN丨Elden French Ring F1PROMAX tetikus wayarles tetikus
Dalam folder manakah terletaknya pemandu tetikus Razer?
Mar 02, 2024 pm 01:28 PM
Ramai pengguna tidak tahu ke mana perginya fail yang dipasang oleh pemacu Razer mereka Fail pemacu ini biasanya dipasang pada cakera sistem, iaitu pemacu C komputer Lokasi tertentu berada dalam folder RAZE di bawah fail program. Dalam folder manakah terletaknya pemandu tetikus Razer A: Dalam folder RAZE di bawah fail program pada pemacu sistem C. Secara amnya, pemandu akan dipasang pada pemacu C, cari sahaja mengikut lokasi. Pengenalan kepada kaedah pemasangan pemacu tetikus Razer 1. Selepas memuat turun fail dari tapak web rasmi, klik dua kali untuk menjalankan fail EXE yang dimuat turun. 2. Tunggu sehingga perisian dimuatkan. 3. Di sini anda boleh memilih pemacu yang anda ingin pasang. 4. Selepas memilih, klik "Pasang" di sudut kanan bawah.
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei?
Mar 24, 2024 am 11:27 AM
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Dengan kebangkitan media sosial, WeChat telah menjadi salah satu alat komunikasi yang sangat diperlukan dalam kehidupan seharian orang ramai. Walau bagaimanapun, ramai orang mungkin menghadapi masalah: log masuk ke beberapa akaun WeChat pada masa yang sama pada telefon mudah alih yang sama. Bagi pengguna telefon mudah alih Huawei, tidak sukar untuk mencapai log masuk WeChat dwi Artikel ini akan memperkenalkan cara mencapai log masuk WeChat dwi pada telefon mudah alih Huawei. Pertama sekali, sistem EMUI yang disertakan dengan telefon mudah alih Huawei menyediakan fungsi yang sangat mudah - pembukaan dua aplikasi. Melalui fungsi pembukaan dwi aplikasi, pengguna boleh serentak
Panduan Pengaturcaraan PHP: Kaedah untuk Melaksanakan Jujukan Fibonacci
Mar 20, 2024 pm 04:54 PM
Bahasa pengaturcaraan PHP ialah alat yang berkuasa untuk pembangunan web, yang mampu menyokong pelbagai logik dan algoritma pengaturcaraan yang berbeza. Antaranya, melaksanakan jujukan Fibonacci adalah masalah pengaturcaraan biasa dan klasik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan bahasa pengaturcaraan PHP untuk melaksanakan jujukan Fibonacci, dan melampirkan contoh kod tertentu. Jujukan Fibonacci ialah jujukan matematik yang ditakrifkan seperti berikut: unsur pertama dan kedua bagi jujukan ialah 1, dan bermula dari unsur ketiga, nilai setiap unsur adalah sama dengan jumlah dua unsur sebelumnya. Beberapa elemen pertama urutan
Berwarna-warni melancarkan tetikus permainan wayarles M900 Pro: bentuk ergonomik sebelah kanan, penerima Nano 8K, bermula dari 199 yuan
Mar 23, 2024 pm 05:16 PM
Menurut berita dari laman web ini pada 22 Mac, Delux telah melancarkan tetikus permainan tanpa wayar M900Pro, yang direka bentuk dengan bentuk ergonomik tangan kanan Harga pra-jualan pertama bermula pada 199 yuan. M900Pro berwarna-warni direka dengan ergonomik tangan kanan dan dibina untuk pengguna dengan tangan sederhana hingga besar Beratnya 63g dan disembur dengan salutan UV matte. Tetikus menggunakan penderia PAW3395, penerima Nano asal menyokong kadar pulangan wayarles 8000Hz, dilengkapi dengan pergerakan mikro titik merah jambu kulit biru Huannuo dan didatangkan secara standard dengan pangkalan pengecasan RGB dan pelekat anti-gelincir. Selain itu, tetikus juga menyokong fungsi seperti pelarasan LOD, penyesuaian kunci penuh, kawalan riak tersuai, dan pembetulan garis lurus Ia dilengkapi dengan pad kaki PTFE, kord paracord 1.6m dan petak storan penerima terbina dalam. Tapak ini meringkaskan parameter khusus tetikus ini seperti berikut: Warna: hitam, putih, merah
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei
Mar 24, 2024 pm 06:03 PM
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Dengan populariti perisian sosial dan penekanan yang semakin meningkat terhadap privasi dan keselamatan orang ramai, fungsi klon WeChat telah beransur-ansur menjadi tumpuan perhatian. Fungsi klon WeChat boleh membantu pengguna log masuk ke berbilang akaun WeChat pada telefon mudah alih yang sama pada masa yang sama, menjadikannya lebih mudah untuk diurus dan digunakan. Tidak sukar untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Anda hanya perlu mengikuti langkah berikut. Langkah 1: Pastikan versi sistem telefon mudah alih dan versi WeChat memenuhi keperluan Pertama, pastikan versi sistem telefon mudah alih Huawei anda telah dikemas kini kepada versi terkini, serta Apl WeChat.
