html中放大镜案列,jQuery实现放大镜案例

本文实例为大家分享了jQuery实现放大镜效果的具体代码，供大家参考，具体内容如下

动画：

1、鼠标移入显示区图片时，显示选择框；

2、放大镜特效，将图片位于选择框内的部分放大显示；

3、点击下方小图片和左右移动按钮时正确的显示图片

实现方法：

1、放大效果：放大区的与显示区使用相同的图片，并设置放大区图片的长宽为显示区的二倍；

2、选择框拖动效果：鼠标移动时获得鼠标的坐标，并根据选择框的和图片的offset()属性计算出选择框的新位置。同时修改放大区图片的位置，使其与选择框内的部分对应；

3、点击小图片效果：修改小图片的class改变其样式，同时修改显示区和放大区图片的src显示对应的图片；

4、左移按钮：点击时通过each函数找到当前显示的图片，然后判断是否为第一张图片，如果是第一张图片则将最后一张图片设置为要显示的图片，修改其样式，同时修改显示区和放大区图片的src显示对应的图片。若果不是第一张图片，则将前一张图片设置为要显示的图片，修改其样式，同时修改显示区和放大区图片的src显示对应的图片；

5、右移按钮：原理有左移按钮相同。

(详见下方代码)

动画效果：

放大镜

• 
• 
• 
• 
•