作者：b01453901 | 来源：互联网 | 2018-07-18 13:12
elevateZoom 是一个定制性非常高的 jQuery 放大镜插件，可实现电子商务网站中查看大图的效果。它能够对一张图片或两张图片(一张缩略图和一张大图)实现放大效果。放大图片的位置可自定义设置，并且支持内缩放，使用放大镜镜头展示大图。
首先我们看下6种不同放大镜HTML结果：
默认效果
内置镜头
镜头聚焦
淡入/淡出设置
动画
鼠标滚动
6中不同的放大镜效果代码都很简单，代码都已翻译注释：
$(&＃039;#zoom_01&＃039;).elevateZoom({});//默认效果
$(&＃039;#zoom_02&＃039;).elevateZoom({ //内置镜头
zoomType: "inner",//类型：内置镜头
cursor: "crosshair", //光标：十字
zoomWindowFadeIn: 500,//镜头窗口淡入速度
zoomWindowFadeOut: 750 //镜头窗口淡出速度
});
$("#zoom_03").elevateZoom({ //镜头聚焦
zoomType: "lens",//类型：透镜效果
lensShape: "round", //透镜形状：圆形
lensSize: 200 //透镜尺寸：长和宽：200px
});
$("#zoom_04").elevateZoom({ //淡入/淡出设置
zoomWindowFadeIn: 500,//镜头窗口淡入速度
zoomWindowFadeOut: 500,//镜头窗口淡出速度
lensFadeIn: 500,//透镜淡入速度
lensFadeOut: 500//透镜淡出速度
});
$("#zoom_05").elevateZoom({ //动画
easing: true //是否开启动画效果
});
$("#zoom_06").elevateZoom({ //鼠标滚动
scrollZoom: true //是否开启鼠标滚动
});放大镜演示：http://www.sucaihuo.com/js/127.html
AD：真正免费，域名+虚机+企业邮箱=0元
京公网安备 11010802041100号