jQuery實現放大鏡效果實例代碼

2019-11-20 10:22:49

字體：大中小

來源：轉載

供稿：網友

在沒給大家做詳細文字說明之前，先給大家分享一段簡單的jquery實現放大鏡效果代碼，需要的朋友可以直接拿去代碼。

$(function(){var mouseX = 0; //鼠標移動的位置Xvar mouseY = 0; //鼠標移動的位置Yvar maxLeft = 0; //最右邊var maxTop = 0; //最下邊var markLeft = 0; //放大鏡移動的左部距離var markTop = 0; //放大鏡移動的頂部距離var perX = 0; //移動的X百分比var perY = 0; //移動的Y百分比var bigLeft = 0; //大圖要移動left的距離var bigTop = 0; //大圖要移動top的距離//改變放大鏡的位置function updataMark($mark){//通過判斷，讓小框只能在小圖區域中移動 if(markLeft<0){markLeft = 0;}else if(markLeft>maxLeft){markLeft = maxLeft;}if(markTop<0){markTop = 0;}else if(markTop>maxTop){markTop = maxTop;}//獲取放大鏡的移動比例，即這個小框在區域中移動的比例perX = markLeft/$(".small").outerWidth();perY = markTop/$(".small").outerHeight();bigLeft = -perX*$(".big").outerWidth();bigTop = -perY*$(".big").outerHeight();//設定小框的位置$mark.css({"left":markLeft,"top":markTop,"display":"block"});}//改變大圖的位置function updataBig(){$(".big").css({"display":"block","left":bigLeft,"top":bigTop});}//鼠標移出時function cancle(){$(".big").css({"display":"none"}); $(".mark").css({"display":"none"});}//鼠標小圖上移動時function imgMouseMove(event){var $this = $(this);var $mark = $(this).children(".mark");//鼠標在小圖的位置mouseX = event.pageX-$this.offset().left - $mark.outerWidth()/2;mouseY = event.pageY-$this.offset().top - $mark.outerHeight()/2;//最大值maxLeft =$this.width()- $mark.outerWidth();maxTop =$this.height()- $mark.outerHeight();markLeft = mouseX;markTop = mouseY;updataMark($mark);updataBig();}$(".small").bind("mousemove",imgMouseMove).bind("mouseleave",cancle);})

需要注意這個里面主要有二點

1.如何大圖跟隨"放大鏡"的位置，同時移動大圖?

其實就是用到一個比例關系，當“放大鏡”移動多少比例（是比例，不是具體值），大圖也同時用這個比例去乘以大圖的寬和高，就可以算出大圖該移動多少距離了；

2.顯示區域和放大鏡的關系？

這里的“放大鏡”應該和大圖的顯示區域的比例，應該是大圖和小的比例關系一樣。比如大圖和小圖的比例是1:2，那個“放大鏡”區域的大小，和顯示大圖區域的大小比例也應該是1:2，不然“放大鏡”罩住的小圖區域，和大圖的顯示區域，所顯示的圖像信息，不能保持一致。（妙味課堂里講的那個實例，就是沒有保持一至）;

好了，以上代碼還算比較簡單，下面給大家通過文字說明加代碼的形式給大家介紹jquery實現放大鏡效果。

1.1.1 摘要

相信大家都見過或使用過放大鏡效果，甚至實現過該效果，它一般應用于放大查看商品圖片，一些電商網站（例如：凡客，京東商城，阿里巴巴等）都有類似的圖片查看效果。

在接下來的博文中，我們將向大家介紹通過jQuery實現放大鏡效果。

•實現原理

•mousemove事件

•相對坐標

•background-position屬性

•mousewheel事件

1.1.2 正文

實現原理

首先，我們講解一下放大鏡效果的實現方式：

方法一：準備一張高像素的大圖，當鼠標放到原圖上，加載顯示大圖的對應位置。

方法二：對原圖片進行放大，也就是調整原圖的長和寬。

上面我們介紹了通過兩種方式實現放大鏡效果，接下來，我們將以上的兩種方式應用到我們的jQuery插件中。

首先，我們需要一個img元素顯示原圖對象，還需要一個容器作為顯示框；顯示框里面存放大圖對象。當鼠標移動到原圖上時，通過對大圖進行絕對定位來顯示對應的部位，實現類似放大鏡的效果。

接下來，讓我們定義Index.html頁面，具體實現如下：

<!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" src="./img/1.jpg" width="700" /></div></body></html>

上面，我們定義了small對象用于顯示原圖，而large對象作為一個顯示框用來顯示大圖的對應位置。

mousemove事件

接下來，我們通過jQuery插件形式來實現放大鏡效果，當鼠標移動到small對象上方時，就會在large對象中顯示大圖的對應位置，這就涉及到mousemove事件了，所以，我們需要實現mousemove事件的監聽方法（如何定義jQuery插件可以參考《自定義jQuery插件Step by Step》）。

現在，讓我們實現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.widthsmall.y / small.height = large.y / large.heightthen 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});}}});});

上面，我實現了mousemove事件的監聽方法，當鼠標移動到magnify對象中，我們需要獲取當前鼠標的相對坐標位置，下面我們通過圖片講解如何獲取鼠標的相對坐標位置。

相對坐標

圖1鼠標相對坐標位置

當鼠標移動到magnify對象中，我們需要獲取鼠標在magnify中的相對坐標位置，這里我們把相對坐標定義為(mx,my)，通過上圖我們知道相對坐標等于(pageX - offsetLeft, pageY - offsetTop)。

現在，我們已經獲取鼠標在magnify對象中的坐標值，接下來，需要獲取對應大圖的相應坐標，這里我們把大圖的對應坐標定義為(rx,ry)，我們可以通過比例關系獲取(rx,ry)的值。

mx / small.width （原圖的寬）= rx / native_width（大圖的寬）

my / small.height （原圖的長）= ry / native_height（大圖的長）

通過上面的比例關系，我們知道大圖的坐標(rx,ry)等于(mx/small.width*native_width, my/small.height*native_height)。

通過上述的公式，我們可以獲取大圖對應坐標位置，當鼠標移動到magnify對象中就顯示對應位置的大圖部位，接下來我們需要實現大圖的加載實現了。

background-position屬性

在實現大圖加載顯示之前，首先介紹CSS中背景定位background-position的知識。

圖2 CSS background-position

上面，有一個100x100像素的圖片它由四種顏色組成，而且每種顏色占50 x50像素，接下來，我們將通過修改該圖片CSS的background-position屬性值來顯示該圖片的不同位置。

我們看到在大正方形下有兩行小正方形，它們顯示的顏色位置都不相同，這里我們通過修改每個div元素CSS的background-position屬性值實現的。

例如：第一行的藍色方形，我們設置CSS的background-position屬性為：0px -50px;這相當于原圖往上移動50px，第一行的其他方形也通過左右和上下移動實現的。

但第二行的方形就顯得更加奇怪了，因為它們都由四種顏色組成，而且顏色的位置都不一樣，這究竟是怎樣實現的呢？

例如：第二行的第一個方形，我們設置CSS的background-position屬性為：25px 25px;這相當于原圖向下和向右移動了25px，由于image wrap的作用它會填充剩余位置的顏色。

現在，我們已經了解到了CSS的background-position屬性的作用，所以我們通過修改large對象的background-position屬性來顯示對應的圖像部分，具體實現如下：

$large.css({left: px,top: py,backgroundPosition: bgp});

上面，我們通過加載大圖的方式來實現放大鏡效果，接下來，我們將介紹通過調整原圖的長和寬來實現放大鏡效果。

mousewheel事件

前面，我們通過mousemove事件來放大圖片，這里我們將通過鼠標的滾輪事件實現圖片放大效果。

由于，不同的瀏覽器有不同的滾輪事件。主要是有三種：onmousewheel（IE 6/7/8）、mousewheel（IE9，Chrome，Safari和Opera）和DOMMouseScroll（只有Firefox支持），關于這三個事件這里不做詳細的介紹了。

由于不同瀏覽器之間存在著差異，為了實現瀏覽器之間的兼容，所以，我們需要監聽以上三種滾輪事件（onmousewheel，mousewheel和DOMMouseScroll），具體實現如下：

$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) {});

上面，我們實現了兼容不同瀏覽器的滾輪事件監聽方法，接下來，判斷滾輪向上或向下也要考慮不同瀏覽器的兼容性，主流的覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四類使用wheelDelta；兩者只在取值上不一致，代表含義一致，detail與wheelDelta只各取兩個值，detail只取±3，wheelDelta只取±120，其中正數表示為向上，負數表示向下。

由于detail和wheelDelta都有兩個值表示向上或向下滾動，所以不同瀏覽器間可以通過以下方式實現兼容，具體實現如下：

$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) {// cross-browser wheel deltavar e = window.event || e; // old IE support.var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));});

上面，我們已經處理了不同瀏覽器滾輪監聽方法，當用戶滾動滾輪時需要動態地修改原圖的尺寸，這里我們定義縮放比scaling為0.3，也就是說每當用戶滾動一下滾輪原圖就按0.3的比例進行縮放，具體實現如下：

// 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"); 現在，我們已經實現了通過滾輪對圖片進行縮放查看的效果，完整的實現如下：/************************************ 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.widthsmall.y / small.height = large.y / large.heightthen 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 deltae = 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.widthsmall.y / small.height = large.y / large.heightthen 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);