基于jQuery实现放大镜效果

相信大家都见过或者使用过放大镜效果，甚至实现过。它通常用于以放大的方式查看商品图片。一些电子商务网站(如柯凡、JD.COM商城、阿里巴巴等。)具有类似的图片观看效果。

在下一篇文章中，我们将通过jQuery介绍放大镜效果。

1.实现原理首先，我们来解释一下放大镜效应的实现：

方法一：准备一张高像素的大图片，鼠标放在原图片上，加载并显示大图片对应的位置。

方法二：放大原图，即调整原图的长宽。

我们介绍了两种实现放大镜效果的方法。接下来，我们将上述两种方法应用于我们的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 '/headsdydiv class=' amplified ' Div class=' large '/Div img class=' small ' src=' http :/img/1 . jpg ' width=' 700 '/div/body/html上面，我们定义了一个小对象来显示原始图像，并定义了一个大对象作为显示框来显示大图像的对应位置。

2.mousemove事件接下来，我们通过jQuery插件实现放大镜效果。当鼠标在小对象上移动时，大图像对应的位置就会显示在大对象上，这就涉及到mousemove事件。因此，我们需要实现mousemove事件的监控方法(如何定义jQuery插件请参考《自定义jQuery插件Step by Step》)。

现在，让我们实现jquery.imagezoom.js插件！

；(函数($) { $.fn.imageZoom=函数(选项){ //图像的原生宽度和高度。var native_width=0，native_height=0，current_width=0，current_height=0，$small=$('。小')，$大=$('。大')；$('.放大')。mousemove(函数(e) { /*作用于事件*/if(！原生宽度！native _ height){ var Image _ object=new Image()；image _ object . src=$ small . attr(' src ')；//获取图像的原始高度和宽度。native _ height=image _ object . height；native _ width=image _ object . width；//获取图像的当前高度和宽度。current _ height=$ small . height()；current _ width=$ small . width()；} else {//get。maginfy偏移坐标。var amplife _ offset=$(this)。offset()，//获取. maginfoy . MX=e . pagex-放大_offset.left，my=e.pageY -放大_offset.top内的坐标；//检查内部的鼠标。信不信由你。if (mx $(this)。width() my $(this)。高度()MX 0 my 0){ $ large . fadein(100)；} else { $ large . fade out(100)；}如果($ large . is(' : visible '){/*按比例获取大图像坐标small . x/small . width=large . x/large . width small . y/small . height=large . y/large . 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，background position : BGP })；} } });});以上，我实现了鼠标移动事件的监控方法。当鼠标移动到放大对象时，我们需要得到当前鼠标的相对坐标位置。下面，我们通过图片说明如何获取鼠标的相对坐标位置。

3.相对坐标。

图1鼠标的相对坐标位置。

当鼠标移动到放大对象时，我们需要得到鼠标在放大中的相对坐标位置。这里，我们将相对坐标定义为(mx，my)。从上图可知，相对坐标等于(pagex-offsetleft，pagey-offsettop)。

现在，我们已经获得了鼠标在放大对象中的坐标值。接下来，我们需要获得大图像的对应坐标。这里我们把大图像对应的坐标定义为(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)。

通过上面的公式，我们可以得到大图像对应的坐标位置，当鼠标移动到放大对象时，就会显示该位置对应的大图像位置。接下来，我们需要加载大图像。

4.背景位置属性在加载和显示大图之前，先介绍一下CSS中背景位置的知识。

图2 CSS背景-位置。

上图是一张100x100像素的图片，由四种颜色组成，每种颜色占用50 x50像素。接下来，我们将通过修改图片CSS的背景位置属性值来显示图片的不同位置。

我们可以看到大方块下面有两排小方块，它们显示的颜色位置是不一样的。这里，我们通过修改每个div元素的CSS的背景位置属性值来实现。

例如，在第一行的蓝色方块中，我们将CSS的背景位置属性设置为：0px-50px；这相当于原图上移了50px，第一行的其他方块也是通过左右和上下移动实现的。

但是第二排的方块就更奇怪了，因为都是四种颜色组成的，颜色的位置也不一样。这是如何实现的？

比如第二行第一个方块，我们把CSS的背景-位置属性设置为：25px 25px这相当于原始图像向下向右移动25px，由于图像环绕的作用，它将填充剩余的颜色。

现在，我们已经理解了CSS的背景位置属性的作用，所以我们修改大对象的背景位置属性来显示相应的图像部分。具体实现如下：

$large.css({ left: px，top: py，background position : BGP })；上图，我们通过加载一个大图像来实现放大镜效果。接下来，我们将介绍如何通过调整原始图像的长度和宽度来实现放大镜效果。

5.在mousewheel事件之前，我们通过mousemove事件放大图片，这里我们将通过mouse wheel事件放大图片。

因为，不同的浏览器有不同的滚动事件。主要有三种类型：onmousewheel(IE 6/7/8)、mousewheel(IE9、Chrome、Safari和Opera)和DOMMouseScroll(仅火狐支持)。这里不详细介绍这三个事件。

由于不同浏览器之间存在差异，为了实现浏览器之间的兼容性，我们需要对以上三种roller事件(onmousewheel、mousewheel和DOMMouseScroll)进行监控，具体实现如下：

$('.放大')。bind(' domouseroll mouse wheel on mousewheel '，function(e){ })；在上面，我们实现了一种监控与不同浏览器兼容的滚轮事件的方法。接下来，我们在判断滚轮是上升还是下降时，也要考虑不同浏览器的兼容性。火狐在主流浏览器(IE、Opera、Safari、火狐和Chrome)中使用细节，而wheelDelta用于其他四个类别。两个值只是不一致，意思是一样的。detail和wheelDelta分别只取两个值，detail只取3，wheelDelta只取120，其中正数表示向上，负数表示向下。

由于detail和wheelDelta都有两个指示向上或向下滚动的值，不同的浏览器可以通过以下方式兼容，如下所示：

$('.放大')。bind(' domouseroll mouse wheel on mousewheel '，函数(e) { //跨浏览器轮delta var e=window.event | | e//旧IE支持。var delta=Math.max(-1，Math.min(1，(e . wheel delta | |-e . detail)))；});以上，我们已经处理了不同的浏览器滚轮监控方法。当用户滚动滚轮时，需要动态修改原始图像的大小。这里，我们把缩放比例定义为0.3，也就是说，每当用户滚动滚轮时，原始图像都会按照0.3的比例进行缩放。具体实现如下：

//获取图像缩放高度和宽度. native _ height=(native _ height * scaling * delta)；native_width=(native_width *缩放* delta)；//更新背景图像大小。$large.css('background-size '，native _ width ' px ' native _ height ' px ')；现在，我们已经实现了通过滚轮缩放查看图片的效果，完整的实现如下：

（函数($) { $.fn.imageZoom=函数（选项){ //图像的原生宽度和高度var .默认值={ scale : 0.3 }；//组合对象默认值和选项。选项=$。扩展(默认值，选项)，native_width=0，native_height=0，current_width=0，current_height=0，$small=$(' .小'),$大=$('。大');$('.放大')。鼠标移动(函数(e) { /*作用于事件*/if(！原生宽度！native _ height){ var Image _ object=new Image()；图像对象。src=$ small。attr(' src ')；//获取图像的原始高度和宽度原生高度=图像对象。身高；native _ width=image _ object。宽度；//获取图像的当前高度和宽度current _ height=$ small。高度()；current _ width=$ small。宽度()；} else {//get .maginfy偏移坐标var amplife _ offset=$(this).offset()，//获取。马金福。MX=e . pagex-放大_offset.left，my=e.pageY -放大_offset.top内的坐标；//检查内部的鼠标。信不信由你if (mx $(this ).宽度()我的$(这个).高度()MX 0 my 0){ $ large。法丁(100)；} else { $ large。淡出(100)；}如果($大。是(' :可见'){/*按比例获取大图像坐标很小。x/小。宽度=大。x/大。宽度小。y/小。高度=大。y/大。高度那么我们需要将指针保持在中间，所以扣除的一半。大的宽度和高度*/var rx=数学。圆形(MX/$小。width()* native _ width-$ large。width()/2)*-1，ry=math。圆的(我的/$小的。height()* native _ height-$ large。height()/2)*-1，bgp=rx 'px ' ry 'px '，px=mx - $large.width()/2，py=my-$ large。高度()/2；$large.css({ left: px，top: py，背景位置： BGP })；} } });$('.放大')。绑定(' domousescroll mouse wheel上鼠标滚轮'，函数{ var Image _ object=new Image()；图像对象。src=$大。attr(' src ')；//跨浏览器滚轮delta e=window.event | | e//旧工业管理学(Industrial Engineering)支持var delta=Math.max(-1，Math.min(1，(e轮delta | |-e细节))；//获取图像缩放高度和宽度native _ height=(native _ height *默认值。缩放*)；native _ width=(native _ width *默认值。缩放*)；//图像不能比原件小if(native _ height current _ height){ native _ height=current _ height；} if(native _ width current _ width){ native _ width=current _ width；}//控制台。log(' native _ height : ' native _ height ' native _ width : ' native _ width)；//获取maginfy .偏移坐标var amplife _ offset=$(this).偏移量()，mx=e.pageX -放大_offset.left，my=e.pageY -放大_ offset.top//更新背景图像大小$large.css('背景大小'，native _ width ' px ' native _ height ' px ')；/*按比例获取大图像坐标小。x /小。宽=大。x /大。宽小。y /小。高=大。y /大。高那么我们需要将指针保持在中心，所以扣除的一半。大的宽度和高度*/var rx=数学。圆形(MX/$小。width()* native _ width-$ large。width()/2)*-1，ry=math。圆的(我的/$小的。height()* native _ height-$ large。height()/2)*-1，bgp=rx 'px ' ry 'px '，px=mx - $large.width()/2，py=my-$ large。高度()/2；$large.css({ left: px，top: py，背景位置： BGP })；});};})(jQuery)；上面，我们实现了放大镜效果，当我们鼠标停留在图片上方会自动放大图片的相应部位，当然我们可以通过滚轮调整放大的比例。

在本文中，我们介绍了如何实现放大镜效果，总的来说，我们可以通过两种方式实现放大镜效果，而且在文中都给出了详细的介绍，通过鼠标移动事件实现加载大图的效果，鼠标滚轮事件实现动态修改原图的尺寸。

这只是一个简单的程序，我们还有很大的改进空间。我们的目标是提供一个内容丰富、功能强大的程序。

这是本文的详细内容，希望对大家的学习有所帮助。