![\"jQuery實(shí)現(xiàn)放大鏡效果_html\/css_WEB-ITnose\"](\".\/img\/1.jpg\")
<\/div><\/body><\/html><\/pre> 
jQuery實(shí)現(xiàn)放大鏡效果_html/css_WEB-ITnose
Jun 24, 2016 pm 12:33 PM
1.1.1 摘要
相信大家都見(jiàn)過(guò)或使用過(guò)放大鏡效果，甚至實(shí)現(xiàn)過(guò)該效果，它一般應(yīng)用于放大查看商品圖片，一些電商網(wǎng)站（例如：凡客，京東商城，阿里巴巴等）都有類似的圖片查看效果。
在接下來(lái)的博文中，我們將向大家介紹通過(guò)jQuery實(shí)現(xiàn)放大鏡效果。
目錄 實(shí)現(xiàn)原理 mousemove事件 相對(duì)坐標(biāo) background-position屬性 mousewheel事件 1.1.2 正文 實(shí)現(xiàn)原理首先，我們講解一下放大鏡效果的實(shí)現(xiàn)方式：
方法一：準(zhǔn)備一張高像素的大圖，當(dāng)鼠標(biāo)放到原圖上，加載顯示大圖的對(duì)應(yīng)位置。
方法二：對(duì)原圖片進(jìn)行放大，也就是調(diào)整原圖的長(zhǎng)和寬。
上面我們介紹了通過(guò)兩種方式實(shí)現(xiàn)放大鏡效果，接下來(lái)，我們將以上的兩種方式應(yīng)用到我們的jQuery插件中。
首先，我們需要一個(gè)img元素顯示原圖對(duì)象，還需要一個(gè)容器作為顯示框；顯示框里面存放大圖對(duì)象。當(dāng)鼠標(biāo)移動(dòng)到原圖上時(shí)，通過(guò)對(duì)大圖進(jìn)行絕對(duì)定位來(lái)顯示對(duì)應(yīng)的部位，實(shí)現(xiàn)類似放大鏡的效果。
接下來(lái)，讓我們定義Index.html頁(yè)面，具體實(shí)現(xiàn)如下：
<!doctype html><html lang="en-US"><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery Image Zoom Demo</title> <meta name="author" content="Jackson Huang"></head><body><div class="magnify"><div class="large"></div><img class="small lazy" src="/static/imghw/default1.png" data-src="./img/1.jpg" style="max-width:90%" / alt="jQuery實(shí)現(xiàn)放大鏡效果_html/css_WEB-ITnose" ></div></body></html>
上面，我們定義了small對(duì)象用于顯示原圖，而large對(duì)象作為一個(gè)顯示框用來(lái)顯示大圖的對(duì)應(yīng)位置。
mousemove事件接下來(lái)，我們通過(guò)jQuery插件形式來(lái)實(shí)現(xiàn)放大鏡效果，當(dāng)鼠標(biāo)移動(dòng)到small對(duì)象上方時(shí)，就會(huì)在large對(duì)象中顯示大圖的對(duì)應(yīng)位置，這就涉及到mousemove事件了，所以，我們需要實(shí)現(xiàn)mousemove事件的監(jiān)聽(tīng)方法（如何定義jQuery插件可以參考《自定義jQuery插件Step by Step》）。
現(xiàn)在，讓我們實(shí)現(xiàn)jquery.imagezoom.js插件吧！
;(function ($) { $.fn.imageZoom = function (options) { // The native width and height of the image. var native_width = 0, native_height = 0, current_width = 0, current_height = 0, $small = $(".small"), $large = $(".large"); $(".magnify").mousemove(function (e) { /* Act on the event */ if (!native_width && !native_height) { var image_object = new Image(); image_object.src = $small.attr('src'); // Gets the image native height and width. native_height = image_object.height; native_width = image_object.width; // Gets the image current height and width. current_height = $small.height(); current_width = $small.width(); } else { // Gets .maginfy offset coordinates. var magnify_offset = $(this).offset(), // Gets coordinates within .maginfy. mx = e.pageX - magnify_offset.left, my = e.pageY - magnify_offset.top; // Checks the mouse within .maginfy or not. if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) { $large.fadeIn(100); } else { $large.fadeOut(100); } if ($large.is(":visible")) { /* Gets the large image coordinate by ratio small.x / small.width = large.x / large.width small.y / small.height = large.y / large.height then we need to keep pointer in the centre, so deduct the half of .large width and height. */ var rx = Math.round(mx / $small.width() * native_width - $large.width() / 2) * -1, ry = Math.round(my / $small.height() * native_height - $large.height() / 2) * -1, bgp = rx + "px " + ry + "px", px = mx - $large.width() / 2, py = my - $large.height() / 2; $large.css({ left: px, top: py, backgroundPosition: bgp }); } } });}); 上面，我實(shí)現(xiàn)了mousemove事件的監(jiān)聽(tīng)方法，當(dāng)鼠標(biāo)移動(dòng)到magnify對(duì)象中，我們需要獲取當(dāng)前鼠標(biāo)的相對(duì)坐標(biāo)位置，下面我們通過(guò)圖片講解如何獲取鼠標(biāo)的相對(duì)坐標(biāo)位置。
相對(duì)坐標(biāo)
圖1鼠標(biāo)相對(duì)坐標(biāo)位置
當(dāng)鼠標(biāo)移動(dòng)到magnify對(duì)象中，我們需要獲取鼠標(biāo)在magnify中的相對(duì)坐標(biāo)位置，這里我們把相對(duì)坐標(biāo)定義為(mx,my)，通過(guò)上圖我們知道相對(duì)坐標(biāo)等于(pageX - offsetLeft, pageY - offsetTop)。
現(xiàn)在，我們已經(jīng)獲取鼠標(biāo)在magnify對(duì)象中的坐標(biāo)值，接下來(lái)，需要獲取對(duì)應(yīng)大圖的相應(yīng)坐標(biāo)，這里我們把大圖的對(duì)應(yīng)坐標(biāo)定義為(rx,ry)，我們可以通過(guò)比例關(guān)系獲取(rx,ry)的值。
mx / small.width （原圖的寬）= rx / native_width（大圖的寬）
my / small.height （原圖的長(zhǎng)）= ry / native_height（大圖的長(zhǎng)）
通過(guò)上面的比例關(guān)系，我們知道大圖的坐標(biāo)(rx,ry)等于(mx/small.width*native_width, my/small.height*native_height)。
通過(guò)上述的公式，我們可以獲取大圖對(duì)應(yīng)坐標(biāo)位置，當(dāng)鼠標(biāo)移動(dòng)到magnify對(duì)象中就顯示對(duì)應(yīng)位置的大圖部位，接下來(lái)我們需要實(shí)現(xiàn)大圖的加載實(shí)現(xiàn)了。
background-position屬性在實(shí)現(xiàn)大圖加載顯示之前，首先介紹CSS中背景定位background-position的知識(shí)。
圖2 CSS background-position
上面，有一個(gè)100x100像素的圖片它由四種顏色組成，而且每種顏色占50 x50像素，接下來(lái)，我們將通過(guò)修改該圖片CSS的background-position屬性值來(lái)顯示該圖片的不同位置。
我們看到在大正方形下有兩行小正方形，它們顯示的顏色位置都不相同，這里我們通過(guò)修改每個(gè)div元素CSS的background-position屬性值實(shí)現(xiàn)的。
例如：第一行的藍(lán)色方形，我們?cè)O(shè)置CSS的background-position屬性為：0px -50px;這相當(dāng)于原圖往上移動(dòng)50px，第一行的其他方形也通過(guò)左右和上下移動(dòng)實(shí)現(xiàn)的。
但第二行的方形就顯得更加奇怪了，因?yàn)樗鼈兌加伤姆N顏色組成，而且顏色的位置都不一樣，這究竟是怎樣實(shí)現(xiàn)的呢？
例如：第二行的第一個(gè)方形，我們?cè)O(shè)置CSS的background-position屬性為：25px 25px;這相當(dāng)于原圖向下和向右移動(dòng)了25px，由于image wrap的作用它會(huì)填充剩余位置的顏色。
現(xiàn)在，我們已經(jīng)了解到了CSS的background-position屬性的作用，所以我們通過(guò)修改large對(duì)象的background-position屬性來(lái)顯示對(duì)應(yīng)的圖像部分，具體實(shí)現(xiàn)如下：
$large.css({ left: px, top: py, backgroundPosition: bgp}); 上面，我們通過(guò)加載大圖的方式來(lái)實(shí)現(xiàn)放大鏡效果，接下來(lái)，我們將介紹通過(guò)調(diào)整原圖的長(zhǎng)和寬來(lái)實(shí)現(xiàn)放大鏡效果。
mousewheel事件前面，我們通過(guò)mousemove事件來(lái)放大圖片，這里我們將通過(guò)鼠標(biāo)的滾輪事件實(shí)現(xiàn)圖片放大效果。
由于，不同的瀏覽器有不同的滾輪事件。主要是有三種：onmousewheel（IE 6/7/8）、mousewheel（IE9，Chrome，Safari和Opera）和DOMMouseScroll（只有Firefox支持），關(guān)于這三個(gè)事件這里不做詳細(xì)的介紹了。
由于不同瀏覽器之間存在著差異，為了實(shí)現(xiàn)瀏覽器之間的兼容，所以，我們需要監(jiān)聽(tīng)以上三種滾輪事件（onmousewheel，mousewheel和DOMMouseScroll），具體實(shí)現(xiàn)如下：
$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) {}); 上面，我們實(shí)現(xiàn)了兼容不同瀏覽器的滾輪事件監(jiān)聽(tīng)方法，接下來(lái)，判斷滾輪向上或向下也要考慮不同瀏覽器的兼容性，主流的覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四類使用wheelDelta；兩者只在取值上不一致，代表含義一致，detail與wheelDelta只各取兩個(gè)值，detail只取±3，wheelDelta只取±120，其中正數(shù)表示為向上，負(fù)數(shù)表示向下。
由于detail和wheelDelta都有兩個(gè)值表示向上或向下滾動(dòng)，所以不同瀏覽器間可以通過(guò)以下方式實(shí)現(xiàn)兼容，具體實(shí)現(xiàn)如下：
$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) { // cross-browser wheel delta var e = window.event || e; // old IE support. var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));}); 上面，我們已經(jīng)處理了不同瀏覽器滾輪監(jiān)聽(tīng)方法，當(dāng)用戶滾動(dòng)滾輪時(shí)需要?jiǎng)討B(tài)地修改原圖的尺寸，這里我們定義縮放比scaling為0.3，也就是說(shuō)每當(dāng)用戶滾動(dòng)一下滾輪原圖就按0.3的比例進(jìn)行縮放，具體實(shí)現(xiàn)如下：
// Gets the image scaling height and width.native_height += (native_height * scaling * delta);native_width += (native_width * scaling * delta);// Update backgroud image size.$large.css('background-size', native_width + "px " + native_height + "px"); 現(xiàn)在，我們已經(jīng)實(shí)現(xiàn)了通過(guò)滾輪對(duì)圖片進(jìn)行縮放查看的效果，完整的實(shí)現(xiàn)如下：
/************************************ Author: Jackson Huang* Blog: http://www.cnblogs.com/rush* Date: 8/23/2013* Reference:* http://www.sitepoint.com/html5-javascript-mouse-wheel/* http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3***********************************/;(function($) { $.fn.imageZoom = function(options) { // The native width and height of the image. var defaults = { scaling: 0.3 }; // Combines object defaults and options. options = $.extend(defaults, options), native_width = 0, native_height = 0, current_width = 0, current_height = 0, $small = $(".small"), $large = $(".large"); $(".magnify").mousemove(function(e) { /* Act on the event */ if (!native_width && !native_height) { var image_object = new Image(); image_object.src = $small.attr('src'); // Gets the image native height and width. native_height = image_object.height; native_width = image_object.width; // Gets the image current height and width. current_height = $small.height(); current_width = $small.width(); } else { // Gets .maginfy offset coordinates. var magnify_offset = $(this).offset(), // Gets coordinates within .maginfy. mx = e.pageX - magnify_offset.left, my = e.pageY - magnify_offset.top; // Checks the mouse within .maginfy or not. if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) { $large.fadeIn(100); } else { $large.fadeOut(100); } if ($large.is(":visible")) { /* Gets the large image coordinate by ratio small.x / small.width = large.x / large.width small.y / small.height = large.y / large.height then we need to keep pointer in the centre, so deduct the half of .large width and height. */ var rx = Math.round(mx / $small.width() * native_width - $large.width() / 2) * -1, ry = Math.round(my / $small.height() * native_height - $large.height() / 2) * -1, bgp = rx + "px " + ry + "px", px = mx - $large.width() / 2, py = my - $large.height() / 2; $large.css({ left: px, top: py, backgroundPosition: bgp }); } } }); $(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) { var image_object = new Image(); image_object.src = $large.attr('src'); // cross-browser wheel delta e = window.event || e; // old IE support. var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); // Gets the image scaling height and width. native_height += (native_height * defaults.scaling * delta); native_width += (native_width * defaults.scaling * delta); // The image can't smaller than the original. if (native_height < current_height) { native_height = current_height; } if (native_width < current_width) { native_width = current_width; } // console.log("native_height: " + native_height + " native_width: " + native_width); // Gets .maginfy offset coordinates. var magnify_offset = $(this).offset(), mx = e.pageX - magnify_offset.left, my = e.pageY - magnify_offset.top; // Update backgroud image size. $large.css('background-size', native_width + "px " + native_height + "px"); /* Gets the large image coordinate by ratio small.x / small.width = large.x / large.width small.y / small.height = large.y / large.height then we need to keep pointer in the centre, so deduct the half of .large width and height. */ var rx = Math.round(mx / $small.width() * native_width - $large.width() / 2) * -1, ry = Math.round(my / $small.height() * native_height - $large.height() / 2) * -1, bgp = rx + "px " + ry + "px", px = mx - $large.width() / 2, py = my - $large.height() / 2; $large.css({ left: px, top: py, backgroundPosition: bgp }); }); };})(jQuery); ?
圖3 放大鏡效果
上面，我們實(shí)現(xiàn)了放大鏡效果，當(dāng)我們鼠標(biāo)停留在圖片上方會(huì)自動(dòng)放大圖片的相應(yīng)部位，當(dāng)然我們可以通過(guò)滾輪調(diào)整放大的比例。
1.1.3 總結(jié)在本博文中，我們介紹了如何實(shí)現(xiàn)放大鏡效果，總的來(lái)說(shuō)，我們可以通過(guò)兩種方式實(shí)現(xiàn)放大鏡效果，而且在博文中都給出了詳細(xì)的介紹，通過(guò)mousemove事件實(shí)現(xiàn)加載大圖的效果，mousewheel事件實(shí)現(xiàn)動(dòng)態(tài)修改原圖的尺寸。
這只是一個(gè)簡(jiǎn)單的程序，我們還有很大的改善空間，提供一個(gè)內(nèi)容豐富和功能強(qiáng)大的程序是我們的目標(biāo)。
參考 http://tech.pro/tutorial/681/css-tutorial-the-background-position-property http://www.sitepoint.com/html5-javascript-mouse-wheel/ http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3Demo
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
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
Terangkan tujuan atribut peranan di Aria.
Jun 14, 2025 am 12:35 AM
Atribut peranan Aria digunakan untuk menentukan peranan elemen web dan meningkatkan kebolehcapaian. 1. Atribut Peranan membantu teknologi bantuan untuk memahami fungsi elemen, seperti butang, navigasi, dan lain-lain. 2. Gunakan atribut peranan untuk menetapkan peranan tertentu kepada unsur-unsur HTML yang tidak semantik. 3. Atribut peranan harus konsisten dengan tingkah laku elemen dan disahkan oleh ujian alat kebolehaksesan.
HTML dan Reka bentuk: Membuat susun atur laman web
Jun 14, 2025 am 12:39 AM
Bagaimana untuk membuat susun atur laman web? 1. Gunakan tag HTML untuk menentukan struktur kandungan, seperti,. 2. Gaya kawalan dan kedudukan melalui CSS, menggunakan model kotak, float atau flexbox. 3. Mengoptimumkan prestasi, mengurangkan permintaan HTTP, menggunakan cache dan mengoptimumkan imej, dan memastikan reka bentuk responsif.
Bagaimanakah saya tetap up-to-date dengan piawaian HTML dan amalan terbaik terkini?
Jun 20, 2025 am 08:33 AM
Kunci untuk bersaing dengan piawaian HTML dan amalan terbaik adalah dengan sengaja dan bukannya mengikutinya secara membuta tuli. Pertama, ikuti ringkasan atau kemas kini log sumber rasmi seperti WHATWG dan W3C, memahami tag baru (seperti) dan atribut, dan menggunakannya sebagai rujukan untuk menyelesaikan masalah yang sukar; Kedua, melanggan surat berita pembangunan web yang dipercayai dan blog, menghabiskan 10-15 minit seminggu untuk melayari kemas kini, memberi tumpuan kepada kes penggunaan sebenar dan bukan hanya mengumpul artikel; Kedua, gunakan alat pemaju dan linter seperti htmlhint untuk mengoptimumkan struktur kod melalui maklum balas segera; Akhirnya, berinteraksi dengan komuniti pemaju, berkongsi pengalaman dan mempelajari kemahiran praktikal orang lain, untuk terus meningkatkan kemahiran HTML.
Bagaimanakah saya menggunakan elemen untuk mewakili kandungan utama dokumen?
Jun 19, 2025 pm 11:09 PM
Alasan untuk menggunakan tag adalah untuk memperbaiki struktur semantik dan kebolehcapaian laman web, memudahkan pembaca skrin dan enjin carian untuk memahami kandungan halaman, dan membolehkan pengguna dengan cepat melompat ke kandungan teras. Berikut adalah perkara utama: 1. Setiap halaman harus mengandungi hanya satu elemen; 2. Ia tidak boleh memasukkan kandungan yang diulangi di seluruh halaman (seperti sidebars atau footers); 3. Ia boleh digunakan bersempena dengan sifat Aria untuk meningkatkan kebolehcapaian. Biasanya terletak selepas dan sebelum ini, ia digunakan untuk membungkus kandungan halaman yang unik, seperti artikel, bentuk atau butiran produk, dan harus dielakkan, atau masuk; Untuk meningkatkan kebolehcapaian, ARIA-Labeledby atau Aria-label boleh digunakan untuk mengenal pasti bahagian-bahagian dengan jelas.
Bagaimana saya membuat dokumen HTML asas?
Jun 19, 2025 pm 11:01 PM
Untuk membuat dokumen HTML asas, anda perlu memahami struktur asasnya dan menulis kod dalam format standard. 1. Gunakan jenis dokumen pengisytiharan pada mulanya; 2. Gunakan tag untuk membungkus keseluruhan kandungan; 3. Termasuk dan dua bahagian utama di dalamnya, yang digunakan untuk menyimpan metadata seperti tajuk, pautan lembaran gaya, dan lain-lain, dan termasuk kandungan pengguna yang kelihatan seperti tajuk, perenggan, gambar dan pautan; 4. Simpan fail dalam format .html dan buka kesan tontonan dalam penyemak imbas; 5. Kemudian anda secara beransur -ansur boleh menambah lebih banyak elemen untuk memperkayakan kandungan halaman. Ikuti langkah -langkah ini untuk membina laman web asas dengan cepat.
Bagaimanakah saya membuat kotak semak dalam html menggunakan elemen ?
Jun 19, 2025 pm 11:41 PM
Untuk membuat kotak semak HTML, gunakan atribut Jenis untuk menetapkan elemen kotak semak. 1. Struktur asas termasuk tag ID, nama dan label untuk memastikan bahawa teks mengklik boleh menukar pilihan; 2. Kotak semak yang berkaitan dengan pelbagai hendaklah menggunakan nama yang sama tetapi nilai yang berbeza, dan bungkusnya dengan Fieldset untuk meningkatkan kebolehcapaian; 3. Sembunyikan kawalan asli apabila menyesuaikan gaya dan gunakan CSS untuk mereka bentuk elemen alternatif sambil mengekalkan fungsi lengkap; 4. Pastikan ketersediaan, label pasangan, sokongan navigasi papan kekunci, dan elakkan bergantung pada hanya arahan visual. Langkah -langkah di atas dapat membantu pemaju dengan betul melaksanakan komponen kotak semak yang mempunyai fungsi dan estetika.
Bagaimana saya meminimumkan saiz fail html?
Jun 24, 2025 am 12:53 AM
Untuk mengurangkan saiz fail HTML, anda perlu membersihkan kod berlebihan, memampatkan kandungan, dan mengoptimumkan struktur. 1. Padam tag yang tidak digunakan, komen dan kosong tambahan untuk mengurangkan jumlah; 2. Pindahkan CSS dan JavaScript dalam fail luaran dan menggabungkan pelbagai skrip atau blok gaya; 3. Memudahkan sintaks label tanpa menjejaskan parsing, seperti menghilangkan tag tertutup pilihan atau menggunakan atribut pendek; 4. Selepas pembersihan, aktifkan teknologi pemampatan sisi pelayan seperti GZIP atau Brotli untuk mengurangkan jumlah penghantaran. Langkah -langkah ini dapat meningkatkan prestasi pemuatan halaman tanpa mengorbankan fungsi.
Bagaimanakah saya membenamkan video dalam html menggunakan elemen ?
Jun 20, 2025 am 10:09 AM
Untuk membenamkan video dalam HTML, gunakan tag dan tentukan sumber video dan atribut. 1. Gunakan atribut atau elemen SRC untuk menentukan laluan video dan format; 2. Tambah atribut asas seperti kawalan, lebar, ketinggian; 3. Untuk bersesuaian dengan penyemak imbas yang berbeza, anda boleh menyenaraikan MP4, WebM, OGG dan format lain; 4. Gunakan kawalan, autoplay, disenyapkan, gelung, pramuat dan atribut lain untuk mengawal tingkah laku main balik; 5. Gunakan CSS untuk merealisasikan susun atur responsif untuk memastikan ia disesuaikan dengan skrin yang berbeza. Kombinasi struktur dan atribut yang betul dapat memastikan paparan yang baik dan sokongan fungsi video.
