jQuery實(shí)現(xiàn)放大鏡效果_html/css_WEB-ITnose
Jun 24, 2016 pm 12:33 PM
1.1.1 摘要
相信大家都見過或使用過放大鏡效果，甚至實(shí)現(xiàn)過該效果，它一般應(yīng)用于放大查看商品圖片，一些電商網(wǎng)站（例如：凡客，京東商城，阿里巴巴等）都有類似的圖片查看效果。
在接下來的博文中，我們將向大家介紹通過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)和寬。
上面我們介紹了通過兩種方式實(shí)現(xiàn)放大鏡效果，接下來，我們將以上的兩種方式應(yīng)用到我們的jQuery插件中。
首先，我們需要一個(gè)img元素顯示原圖對(duì)象，還需要一個(gè)容器作為顯示框；顯示框里面存放大圖對(duì)象。當(dāng)鼠標(biāo)移動(dòng)到原圖上時(shí)，通過對(duì)大圖進(jìn)行絕對(duì)定位來顯示對(duì)應(yīng)的部位，實(shí)現(xiàn)類似放大鏡的效果。
接下來，讓我們定義Index.html頁面，具體實(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è)顯示框用來顯示大圖的對(duì)應(yīng)位置。
mousemove事件接下來，我們通過jQuery插件形式來實(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)聽方法（如何定義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)聽方法，當(dāng)鼠標(biāo)移動(dòng)到magnify對(duì)象中，我們需要獲取當(dāng)前鼠標(biāo)的相對(duì)坐標(biāo)位置，下面我們通過圖片講解如何獲取鼠標(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)，通過上圖我們知道相對(duì)坐標(biāo)等于(pageX - offsetLeft, pageY - offsetTop)。
現(xiàn)在，我們已經(jīng)獲取鼠標(biāo)在magnify對(duì)象中的坐標(biāo)值，接下來，需要獲取對(duì)應(yīng)大圖的相應(yīng)坐標(biāo)，這里我們把大圖的對(duì)應(yīng)坐標(biāo)定義為(rx,ry)，我們可以通過比例關(guān)系獲取(rx,ry)的值。
mx / small.width （原圖的寬）= rx / native_width（大圖的寬）
my / small.height （原圖的長(zhǎng)）= ry / native_height（大圖的長(zhǎng)）
通過上面的比例關(guān)系，我們知道大圖的坐標(biāo)(rx,ry)等于(mx/small.width*native_width, my/small.height*native_height)。
通過上述的公式，我們可以獲取大圖對(duì)應(yīng)坐標(biāo)位置，當(dāng)鼠標(biāo)移動(dòng)到magnify對(duì)象中就顯示對(duì)應(yīng)位置的大圖部位，接下來我們需要實(shí)現(xiàn)大圖的加載實(shí)現(xiàn)了。
background-position屬性在實(shí)現(xiàn)大圖加載顯示之前，首先介紹CSS中背景定位background-position的知識(shí)。
圖2 CSS background-position
上面，有一個(gè)100x100像素的圖片它由四種顏色組成，而且每種顏色占50 x50像素，接下來，我們將通過修改該圖片CSS的background-position屬性值來顯示該圖片的不同位置。
我們看到在大正方形下有兩行小正方形，它們顯示的顏色位置都不相同，這里我們通過修改每個(gè)div元素CSS的background-position屬性值實(shí)現(xiàn)的。
例如：第一行的藍(lán)色方形，我們?cè)O(shè)置CSS的background-position屬性為：0px -50px;這相當(dāng)于原圖往上移動(dòng)50px，第一行的其他方形也通過左右和上下移動(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屬性的作用，所以我們通過修改large對(duì)象的background-position屬性來顯示對(duì)應(yīng)的圖像部分，具體實(shí)現(xiàn)如下：
$large.css({ left: px, top: py, backgroundPosition: bgp}); 上面，我們通過加載大圖的方式來實(shí)現(xiàn)放大鏡效果，接下來，我們將介紹通過調(diào)整原圖的長(zhǎng)和寬來實(shí)現(xiàn)放大鏡效果。
mousewheel事件前面，我們通過mousemove事件來放大圖片，這里我們將通過鼠標(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)聽以上三種滾輪事件（onmousewheel，mousewheel和DOMMouseScroll），具體實(shí)現(xiàn)如下：
$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) {}); 上面，我們實(shí)現(xiàn)了兼容不同瀏覽器的滾輪事件監(jiān)聽方法，接下來，判斷滾輪向上或向下也要考慮不同瀏覽器的兼容性，主流的覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四類使用wheelDelta；兩者只在取值上不一致，代表含義一致，detail與wheelDelta只各取兩個(gè)值，detail只取±3，wheelDelta只取±120，其中正數(shù)表示為向上，負(fù)數(shù)表示向下。
由于detail和wheelDelta都有兩個(gè)值表示向上或向下滾動(dòng)，所以不同瀏覽器間可以通過以下方式實(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)聽方法，當(dāng)用戶滾動(dòng)滾輪時(shí)需要?jiǎng)討B(tài)地修改原圖的尺寸，這里我們定義縮放比scaling為0.3，也就是說每當(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)了通過滾輪對(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)然我們可以通過滾輪調(diào)整放大的比例。
1.1.3 總結(jié)在本博文中，我們介紹了如何實(shí)現(xiàn)放大鏡效果，總的來說，我們可以通過兩種方式實(shí)現(xiàn)放大鏡效果，而且在博文中都給出了詳細(xì)的介紹，通過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)
Melaksanakan butang yang boleh diklik menggunakan elemen butang HTML
Jul 07, 2025 am 02:31 AM
Untuk menggunakan elemen butang HTML untuk mencapai butang yang boleh diklik, anda mesti menguasai penggunaan asas dan langkah berjaga -jaga yang sama. 1. Buat butang dengan tag dan tentukan tingkah laku melalui atribut jenis (seperti butang, hantar, tetapkan semula), yang dikemukakan secara lalai; 2. Tambahkan fungsi interaktif melalui JavaScript, yang boleh ditulis dalam talian atau mengikat pendengar acara melalui ID untuk meningkatkan penyelenggaraan; 3. Gunakan CSS untuk menyesuaikan gaya, termasuk warna latar belakang, sempadan, sudut bulat dan kesan status hover/aktif untuk meningkatkan pengalaman pengguna; 4. Perhatikan masalah biasa: Pastikan atribut kurang upaya tidak didayakan, peristiwa JS terikat dengan betul, oklusi susun atur, dan gunakan bantuan alat pemaju untuk menyelesaikan masalah. Menguasai ini
Mengkonfigurasi metadata dokumen dalam elemen kepala HTML
Jul 09, 2025 am 02:30 AM
Metadata dalam htmlhead adalah penting untuk SEO, perkongsian sosial, dan tingkah laku penyemak imbas. 1. Tetapkan tajuk halaman dan perihalan, gunakan dan simpannya ringkas dan unik; 2. Tambahkan maklumat kad OpenGraph dan Twitter untuk mengoptimumkan kesan perkongsian sosial, perhatikan saiz imej dan gunakan alat penyahpepijatan untuk menguji; 3. Tentukan set aksara dan tetapan Viewport untuk memastikan sokongan pelbagai bahasa disesuaikan dengan terminal mudah alih; 4. Tag pilihan seperti Hak Cipta Pengarang, Kawalan Robot dan Canonical Mencegah Kandungan Duplikat juga harus dikonfigurasi dengan munasabah.
Tutorial HTML terbaik untuk pemula pada tahun 2025
Jul 08, 2025 am 12:25 AM
Tolearnhtmlin2025, chooseatutorialthatalishands-onpracticeWithmodernstandardsandIntegrateScsSandjavascriptbasics.1.priorit izehands-onleleingwithstep-by-stepprojectslikeBuildingapersonalprofileorbloglayout.2.ensureitcoversmodernhtmlelementssuchas,
HTML untuk Tutorial Templat E -mel
Jul 10, 2025 pm 02:01 PM
Bagaimana membuat templat mel html dengan keserasian yang baik? Pertama, anda perlu membina struktur dengan jadual untuk mengelakkan menggunakan susun atur div flex atau grid; Kedua, semua gaya mesti digariskan dan tidak boleh bergantung pada CSS luaran; Kemudian gambar harus ditambah dengan keterangan alt dan menggunakan URL awam, dan butang harus disimulasikan dengan jadual atau TD dengan warna latar belakang; Akhirnya, anda mesti menguji dan menyesuaikan butiran mengenai pelbagai pelanggan.
Bagaimana untuk mengaitkan kapsyen dengan imej atau media menggunakan angka HTML dan elemen figcaption?
Jul 07, 2025 am 02:30 AM
Menggunakan jumlah HTML membolehkan kejelasan intuitif dan semantik untuk menambah teks kapsyen ke imej atau media. 1. Digunakan untuk membungkus kandungan media bebas, seperti gambar, video atau blok kod; 2. Ia diletakkan sebagai teks penjelasannya, dan boleh terletak di atas atau di bawah media; 3. Mereka bukan sahaja meningkatkan kejelasan struktur halaman, tetapi juga meningkatkan akses dan kesan SEO; 4. Apabila menggunakannya, anda harus memberi perhatian untuk mengelakkan penyalahgunaan, dan memohon kepada kandungan yang perlu ditekankan dan disertai dengan keterangan, bukannya gambar hiasan biasa; 5. Atribut alt yang tidak boleh diabaikan, yang berbeza dari figcaption; 6. Figcaption adalah fleksibel dan boleh diletakkan di bahagian atas atau bawah angka seperti yang diperlukan. Menggunakan kedua -dua tag ini dengan betul membantu membina semantik dan mudah difahami kandungan web.
Bagaimana Mengatasi Penyerahan Borang Di HTML Tanpa Pelayan?
Jul 09, 2025 am 01:14 AM
Apabila tiada pelayan backend, penyerahan borang HTML masih boleh diproses melalui teknologi front-end atau perkhidmatan pihak ketiga. Kaedah khusus termasuk: 1. Gunakan JavaScript untuk memintas penyerahan bentuk untuk mencapai pengesahan input dan maklum balas pengguna, tetapi data tidak akan berterusan; 2. Gunakan perkhidmatan bentuk tanpa pelayan pihak ketiga seperti FormSpree untuk mengumpul data dan memberikan pemberitahuan e-mel dan fungsi semula; 3. Gunakan LocalStorage untuk menyimpan data klien sementara, yang sesuai untuk menyimpan keutamaan pengguna atau menguruskan status aplikasi tunggal halaman, tetapi tidak sesuai untuk penyimpanan jangka panjang maklumat sensitif.
Apakah atribut global yang paling biasa digunakan dalam HTML?
Jul 10, 2025 am 10:58 AM
Kelas, ID, Gaya, Data, dan Tajuk adalah atribut global yang paling biasa digunakan dalam HTML. Kelas digunakan untuk menentukan satu atau lebih nama kelas untuk memudahkan tetapan gaya dan operasi JavaScript; ID menyediakan pengenal unik untuk elemen, sesuai untuk lompatan sauh dan kawalan JavaScript; Gaya membolehkan gaya sebaris ditambah, sesuai untuk debugging sementara tetapi tidak disyorkan untuk kegunaan besar-besaran; sifat data digunakan untuk menyimpan data tersuai, yang mudah untuk interaksi front-end dan back-end; Tajuk digunakan untuk menambah arahan tetikus, tetapi gaya dan kelakuannya terhad oleh penyemak imbas. Pemilihan yang munasabah sifat -sifat ini dapat meningkatkan kecekapan pembangunan dan pengalaman pengguna.
Melaksanakan pemuatan malas asli untuk imej dalam html
Jul 12, 2025 am 12:48 AM
Pemuatan malas asli adalah fungsi penyemak imbas terbina dalam yang membolehkan pemuatan gambar malas dengan menambah atribut pemuatan = "malas" ke tag. 1. Ia tidak memerlukan JavaScript atau perpustakaan pihak ketiga, dan digunakan secara langsung dalam HTML; 2. Ia sesuai untuk gambar yang tidak dipaparkan pada skrin pertama di bawah halaman, galeri gambar menatal tambahan dan sumber gambar yang besar; 3. Ia tidak sesuai untuk gambar dengan skrin pertama atau paparan: Tiada; 4. Apabila menggunakannya, pemegang tempat yang sesuai harus ditetapkan untuk mengelakkan susun atur susun atur; 5. Ia harus mengoptimumkan pemuatan imej responsif dalam kombinasi dengan atribut srcset dan saiz; 6. Isu keserasian perlu dipertimbangkan. Sesetengah pelayar lama tidak menyokongnya. Mereka boleh digunakan melalui pengesanan ciri dan digabungkan dengan penyelesaian JavaScript.
