如何用jQuery制作一个长尾关键词搜索的放大镜效果？

本文共计1645个文字，预计阅读时间需要7分钟。

原文示例：本文分享了大家实现放大镜效果的代码，供大家参考，具体内容如下：+ 动画：1、鼠标移入显示区域时，显示选项框；2、放大镜特效，将图片位于选项框内的部分放大。

改写后：分享实现放大镜功能的代码示例，包含动画效果：鼠标移入显示区域显示选择框；放大镜效果，图片选择框内部分放大。

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

动画：

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

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

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

实现方法：

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

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

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

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

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