基于Jquery的商城商品图片的放大镜效果(非组件)

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

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

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

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

鼠标经过小图时 大图随之切换

首先看效果(参考了当当网)：

首先是html

 1 <div class="infoimg"> 2   <div class="mainImg" id="largePicDiv"> 3     <img id="largePic" src='/images/loading.gif' data-original="FileUpload/20160120/20160120103334758_w.jpg"  /> 4     <div class="zoom_pup" id="move"></div> 5     <div id="detailPic" class="big_pic"> 6       <img  src='/images/loading.gif' data-original="FileUpload/20160120/20160120103334758_b.jpg" /> 7     </div> 8   </div> 9   <div class="allImg">10       <img src='/images/loading.gif' data-original="FileUpload/20160120/20160120103334758_x.jpg" />11       <img src='/images/loading.gif' data-original="FileUpload/20160120/20160120103334918_x.jpg" />12       <img src='/images/loading.gif' data-original="FileUpload/20160120/20160120103335031_x.jpg" />13       <img src='/images/loading.gif' data-original="FileUpload/20160120/20160120103335127_x.jpg" />14       <img src='/images/loading.gif' data-original="FileUpload/20160120/20160120103335209_x.jpg" />15 16   </div>17         18 </div>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：基于Jquery的商城商品图片的放大镜效果(非组件)

关键词：jquery