怎样做出京东商品详情的放大镜效果
京东放大镜效果
实现放大镜主要知识点
javascript中DOM操作。
javascript中时间的获取，主要有mouseenter、mouseleave、以及当鼠标在照片上移动的时候onmousemove事件以及其中的事件对象中的属性clientY，clientX,还有获取元素宽度offsetWidth、offsetHight等。
这里面好考虑到绝对定位，以及放大倍率的计算，里面用到的倍率计算公式（小框里面的放大区域面积/小框面积）=（大框的面积/大筐里的大照片的面积）//大照片的原理是将其放在大框里，将大框的css样式设置为overflow：hidden,这样可以将你小筐里的区域按比例显示在大框里面。
具体代码实现情况如下
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style type="text/css">
*{ margin: 0; padding: 0; }
#small{ float: left; width:450px; height:450px; border: 1px solid black; margin-left: 100px; position:absolute; }
#big{ float: left; width:600px; height:600px; overflow: hidden; border: 1px solid black; position: absolute; left:600px; top: 0px; }
#magnifying{ width: 200px; height:200px; background-color: cornflowerblue; opacity: 0.4; left: 0px; top: 0px; position: absolute; }
#bigImg{ position: absolute; width: 1350px; height:1350px; }
</style>
</head>
<body>
<p id="small">
<img src="img/1.png" />//记得将其设置与小框大小一致 <p id="magnifying"></p>
</p>
<p id="big">
<img src="img/2.jpg" id="bigImg" />
</p>
<script type="text/javascript">
var small=document.getElementById("small"); var magnifying=document.getElementById("magnifying"); var big=document.getElementById("big"); var bigImg=document.getElementById("bigImg");
small.onmouseenter=function(){
magnifying.style.display="block";
bigImg.style.display="block"
}
small.onmouseleave=function(){
magnifying.style.display="none";
bigImg.style.display="none";
}
small.onmousemove=function(event){
var left=event.clientX-small.offsetLeft-magnifying.offsetWidth/2; var top=event.clientY-small.offsetTop-magnifying.offsetHeight/2; var leftMax=small.offsetWidth-magnifying.offsetWidth; var topMax=small.offsetHeight-magnifying.offsetHeight; //限制鼠标移动的区域
left = left<=0 ? 0 : left;
top = top <=0? 0:top; //限制右边界与下边界
left =left>=leftMax?leftMax:left;
top =top>=topMax?topMax:top;
magnifying.style.left=left+"px";
magnifying.style.top=top+"px"; //核心代码
var imgLef=-left/leftMax *(bigImg.offsetWidth-big.offsetWidth); var imgTop=-top/topMax * (bigImg.offsetHeight-big.offsetHeight);
bigImg.style.left=imgLef+"px";
bigImg.style.top=imgTop+"px";
} </script>
</body></html>这样就可以实现放大效果啦，希望这些能对对大家有所帮助。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci 怎样做出京东商品详情的放大镜效果. 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
AI Hentai Generator
Menjana ai hentai secara percuma.
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
1378
52
Apakah faedah 'JD.com' ditambah keahlian?
Feb 27, 2024 am 08:10 AM
Ahli JD Plus menikmati banyak faedah keutamaan, seperti percubaan percuma, diskaun eksklusif, penghantaran percuma, dsb. Perkara berikut akan memperkenalkan anda kepada faedah khusus keahlian JD Plus secara terperinci, supaya anda boleh lebih risau dan menjimatkan wang semasa membeli-belah. Apakah faedah menjadi ahli JD Plus? 1. Harga terendah tahun ini: Ahli boleh menikmati harga terendah dan mendapat lebih banyak diskaun apabila membeli barangan. 2. Percuma untuk digunakan: Beberapa produk percubaan percuma akan diedarkan kepada ahli, supaya mereka boleh mencuba perkara yang berbeza. 3. Keutamaan penghantaran: Ia boleh mempunyai kelajuan penghantaran yang lebih cepat dan boleh mendapatkan barangan lebih cepat daripada pengguna biasa. 4. Perkhidmatan pelanggan yang berdedikasi: Kami boleh menyediakan perkhidmatan pelanggan eksklusif yang boleh menjawab soalan pengguna tepat pada masanya.
Bagaimana untuk menyemak ketulenan fon kepala JBL
Dec 29, 2023 pm 10:54 PM
Fon kepala JBL adalah pilihan pertama untuk ramai pengguna mendengar muzik, dengan ulasan yang memberangsangkan, tetapi semua orang masih takut dengan kepalsuan Jadi bagaimana anda boleh menyemak keaslian fon kepala JBL untuk mengelakkan masalah ini? Mari lihat cara membuat pertanyaan di bawah. Cara menyemak ketulenan fon kepala jbl: 1. Mula-mula masukkan "Pusat Pengesahan Maklumat Produk China". 2. Kemudian masukkan kod pertanyaan untuk menyemak sama ada ia betul dan menentukan sama ada ia tulen. 3. Anda juga boleh membezakannya dengan kejelasan bunyi fon telinga. Bunyi fon kepala tulen sangat jelas dan kualiti bunyi tidak akan berubah. Bunyi fon kepala palsu akan mempunyai banyak pemalsuan, dan kualiti bunyi juga sangat buruk. 4. Anda boleh menaikkan bunyi fon kepala anda ke tahap maksimum untuk melihat sama ada ia harmoni Bunyi fon kepala sebenar adalah sama. Tetapi bunyi fon kepala palsu dihidupkan
Adakah Bluetooth 5.3 memerlukan sokongan telefon mudah alih? Untuk butiran sila lihat
Jan 14, 2024 pm 04:57 PM
Apabila kita membeli telefon bimbit, kita akan melihat bahawa terdapat pilihan sokongan Bluetooth dalam parameter telefon mudah alih Kadang-kadang kita akan menghadapi situasi di mana set kepala Bluetooth yang dibeli tidak sepadan dengan telefon mudah alih. Begitu juga dengan Bluetooth 5.3 yang perlu disokong telefon bimbit itu sebenarnya tidak perlu. Adakah Bluetooth 5.3 memerlukan sokongan telefon bimbit. Jawapan: Bluetooth 5.3 memerlukan sokongan telefon mudah alih. Walau bagaimanapun, mana-mana telefon mudah alih yang menyokong Bluetooth boleh digunakan. 1. Bluetooth serasi ke belakang, tetapi menggunakan versi yang sepadan memerlukan sokongan telefon mudah alih. 2. Contohnya, jika kita membeli headset Bluetooth tanpa wayar menggunakan Bluetooth 5.3. 3. Kemudian, jika telefon bimbit kita hanya menyokong Bluetooth 5.0, maka Bluetooth 5.0 digunakan semasa menyambung 4. Oleh itu, kita masih boleh menggunakan telefon bimbit ini untuk menyambung fon kepala untuk mendengar muzik, tetapi kelajuannya tidak sehebat Bluetooth.
Cara menutup Baitiao pada 'Jingdong'
Feb 27, 2024 am 09:22 AM
Anda boleh menutup JD Baitiao melalui langkah-langkah berikut: 1. Buka JD APP 2. Klik pada halaman "My" 3. Pilih "JD Baitiao" 4. Klik "Repay" 5. Pilih "Close Baitiao"; . Menurut Prompt untuk menyelesaikan operasi. Dengan cara ini anda boleh menutup Jingdong Baitiao dengan mudah. Cara menutup Jingdong Baitiao 1. Mula-mula, kita buka Jingdong, klik pada Saya di sudut kanan bawah, dan kemudian klik pada Baitiao seperti yang ditunjukkan dalam gambar. 2. Mari klik pada Saya di sudut kanan bawah, seperti yang ditunjukkan dalam gambar. 3. Kemudian kita klik pada More Settings seperti yang ditunjukkan dalam gambar. 4. Kami mengklik Lain dalam Lebih Banyak Tetapan. 5. Kemudian kita klik bar putih logout di bahagian bawah. 6. Akhir sekali, kami memilih sebab dan klik Teruskan untuk log keluar untuk menutup Jingdong Baitiao.
JD.com terus menaik taraf perkhidmatan insurans pengangkutan barang 'percuma pulang ke pintu dan pertukaran', yang dijangka akan dilancarkan sepenuhnya pada akhir Ogos
Aug 14, 2024 am 10:09 AM
Laman web ini melaporkan pada 13 Ogos bahawa untuk menambah baik pengalaman membeli-belah pengguna dan menyediakan alat pengurusan pesanan perkhidmatan selepas jualan yang lebih mudah dan cekap, JD.com melancarkan perkhidmatan "pemulangan dan pertukaran pintu ke pintu percuma" pada bulan April. tahun ini. Nota di laman web ini: Perkhidmatan "pemulangan dan pertukaran pintu ke pintu percuma" bermaksud bahawa selepas peniaga mendaftar untuk "insurans pengangkutan (versi dinaik taraf)" untuk mengaktifkan perkhidmatan "pemulangan dan pertukaran pintu ke pintu percuma" , pengguna memulakan pemulangan atau pertukaran untuk barangan dengan logo "pemulangan dan pertukaran pintu ke pintu percuma" dipaparkan di meja depan Apabila meminta barangan, syarikat insurans menyediakan perkhidmatan insurans untuk bayaran penghantaran sehala yang ditanggung untuk pemulangan dan pertukaran. Apabila insurans pengangkutan dipenuhi (termasuk insurans pengangkutan penjual dan insurans pengangkutan pembeli), orang penghantaran tidak akan mengenakan bayaran tambang kepada pelanggan semasa mengambil pakej, begitu juga dengan peniaga yang akan mengenakan tambang selepas mengambil pakej sebaliknya, syarikat insurans akan membayar pampasan terus kepada Penghantaran Beijing, halaman butiran akan menggesa bahawa jumlah penghantaran ialah 0. Sekarang
Analisis soalan lazim tentang Cyberpunk 2077
Jan 05, 2024 pm 06:05 PM
Baru-baru ini, permainan yang sangat popular Cyberpunk 2077 telah dilancarkan dalam talian Ramai pengguna tergesa-gesa untuk memuat turun dan mengalaminya Namun, masih terdapat banyak masalah dalam proses Hari ini kami membawakan anda beberapa soalan lazim tentang bermain Cyberpunk 2077 jika anda mahu apa-apa. Soalan lazim tentang bermain Cyberpunk 2077: 1. Butiran harga: 1. Harga pembelian pada platform permainan wap ialah: 298 yuan. 2. Harga pembelian platform permainan epik ialah: 43 dolar AS = 282 yuan. 3. Harga pembelian terminal permainan ps4 ialah: 400 yuan + HKD dan 380 yuan + RMB berkotak. 4. Harga pembelian Rusia di kawasan Rusia ialah: 172 yuan. 2. Butiran konfigurasi: 1. Konfigurasi minimum (1080P): GT
Portal Pertanyaan JD Express
Feb 23, 2024 pm 03:43 PM
Dalam Portal Pertanyaan Ekspres JD, kami boleh menyemak status penghantaran ekspres semasa kami dengan mudah melalui laman web dan mempelajari maklumat yang sepadan. Anda boleh membuat pertanyaan melalui [https://www.jdl.com/orderSearch/?waybillCodes=]. Pengenalan kepada URL laman web portal pertanyaan ekspres ini boleh memberitahu anda cara mengendalikannya. Berikut ialah pengenalan terperinci, datang dan lihat! Jawapan masuk pertanyaan JD Express: [https://www.jdl.com/orderSearch/?waybillCodes=] Butiran: 1. Pergi ke tapak web [https://www.jdl.com/orderSearch
Cara mengendalikan bayaran balik Jingdong sahaja
Feb 24, 2024 am 11:49 AM
Bagaimanakah Jingdong hanya memulangkan wang? ini. Jika anda berminat, datang dan lihat! Tutorial penggunaan Jingdong Cara mengendalikan Jingdong hanya membayar balik 1. Mula-mula buka APP Jingdong dan masukkan kawasan [Saya] di sudut kanan bawah antara muka utama 2. Kemudian pilih fungsi [Pesanan Saya] di kawasan Saya; Akhir sekali, pilih sahaja Untuk pesanan bayaran balik, klik [Apply for Refund] untuk menyelesaikan operasi.
