基于jQuery仿淘宝产品图片放大镜特效

在开发商城的时候，往往会用到图片的放大功能，这里把自己在近期项目中使用的放大镜特效做一下总结（非插件)。

放大镜效果常用的射流研究…组件jquery.imagezoom，jquery.jqzoom，jquery.zoom等这些组件大同小异。大家感兴趣的话可以去百度一下。

本文主要是使用非组件方法来做放大镜效果。

每一张图片都要生成三种尺寸，否则放大镜的效果不会太明显，这里是54X54 320X320 800X800。

首先看效果：鼠标经过小图时，大图随之切换。

首先是超文本标记语言

div class=' info img ' div class=' mainImg ' id=' largePicDiv ' img id=' largePic ' src=' http :文件上传/20160120/20160120103334758 _ w . jpg ' alt='和朋友们一起想办法（第二辑):全8册/div class=' zoom _ pup ' id=' move '/div div id=' detailPic ' class=' big _ pic ' img alt='和朋友们一起想办法（第二辑):全8册src=' http :文件上传/20160120/2016012010334758 _ b . jpg '/div/div类=allImg ' img src=' http :文件上传/20160120/20160120103334758 _ x . jpg ' alt='和朋友们一起想办法（第二辑):全8册/img src=' http :文件上传/20160120/20160120103334918 _ x . jpg ' alt='和朋友们一起想办法（第二辑):全8册/img src=' http :文件上传/20160120/20160120103335031 _ x . jpg ' alt='和朋友们一起想办法（第二辑):全8册/img src=' http :文件上传/20160120/20160120103335127 _ x . jpg ' alt='和朋友们一起想办法（第二辑):全8册/img src=' http :文件上传/20160120/2016012010这里是文章图片09 _ x . jpg ' alt='和朋友们一起想办法（第二辑):全8册//div /div这里编号为移动的差异是放大镜的手柄编号为detailPic的差异是右侧放大镜

钢性铸铁。infoimg { float : left padd : 0 20px 30px 0相对位置：宽度： 320 px}.infoimg img { display:块；高度： 320像素宽度： 320 px}.allImg { height : 58pxmargin : 15px 0 0 10px飞越：隐藏；宽度： 310 px}.allImg img { cursor:指针；向左浮动：高度： 54px右边距： 3pxpadding: 2px宽度： 54px}.allImg img。当前{边框： 1px实心# f1 f1 f1padding: 1px }。mainImg { position:相对；}.mainImg .zoom_pup { background: url('./images/zoom _ pup。png ')重复0 0;光标：移动；高度： 175像素；左： 0px绝对位置：top: 160px宽度： 175像素；显示器：无；}.big_pic {背景-color : # fff；border: 1px实心# F5 F5高度： 400像素；左侧： 320像素飞越：隐藏；绝对位置：文本对齐：中心；top : 0；宽度： 400像素；显示器：无；}.big _ pic img { width: 800px高度： 800像素；}JS代码

//切换图片$('.allImg img ').mouseover(function() { $(')).allImg img ').removeClass(“”当前');$(这个)。添加CLaSS(' current ')；var src=$(this).attr(' src ')；$('#largePic ').attr('src '，src.replace('_x '，' _ w '))；$('#detailPic img ').attr('src '，src.replace('_x '，' _ b ')；});//放大镜效果$('#largePicDiv ').绑定(' mousemove '，函数(e){ var ev=e | |事件；var mouseX=ev . page xvar mouseY=ev . page yvar picLeft=$(' # largePic ').偏移量()。向左；var picTop=$('#largePic ').偏移量()。顶部；var picWidth=$('#largePic ').宽度();var picHeight=$('#largePic ').高度();var Xlength=MouseX-picLeft；var YLength=MouseY-Pictop；var qWidth=picWidth/4；var lastQWidth=picWidth-picWidth/4；var qHeight=picHeight/4；var lastQHeight=picHeight-picHeight/4；if (xLength qWidth) { $('#move ').css('left '，' 0px ')；} else { if(Xlength lastQwidth){ $(' # move ').css('left '，(lastQWidth-qWidth)' px ')；} else { $('#move ').css('left '，(Xlength-Qwidth)' px ')；} } if (yLength qHeight) { $('#move ').css('top '，' 0px ')；} else { if(YLength lastQheight){ $(' # move ').css('top '，(lastQHeight-qHeight)' px ')；} else { $('#move ').css('top '，(YLength-QHeight)' px ')；} } $('#detailPic img ').css('left '，parseInt($('#move ')).CSS(' left ')*(-800/picWidth)' px ').css('top '，parseInt($('#move ')).CSS(' top ')*(-800/picWidth)' px ').css('position '，' absolute ')；});当然这里最下面一排小图片还缺少一个功能，就是当图片大于5张的时候可以左右滚动图片，这样可以容纳大于5张的图片。这里项目中使用的图片一般都小于5张，因此这个功能没有，大家可以参考一下当当或京东。

以上就是jQuery实现图片放大镜效果的代码，希望对大家的学习有所帮助。