jQuery结合elevateZoom演示多种放大镜效果

收藏

elevateZoom 是一个定制性非常高的 jQuery 放大镜插件，可实现电子商务网站中查看大图的效果。它能够对一张图片或两张图片(一张缩略图和一张大图)实现放大效果。放大图片的位置可自定义设置，并且支持内缩放，使用放大镜镜头展示大图。它还内置了一个相册展示的模式，可同时展示多张可缩放的图片。它自带了淡入淡出、easing 等多种效果。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

首先我们看下6种不同放大镜HTML结果：

<h1>默认效果</h1>
<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" />
<h1>内置镜头</h1>
<img id="zoom_02" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" />
<h1>镜头聚焦</h1>
<img id="zoom_03" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" />
<h1>淡入/淡出设置</h1>
<img id="zoom_04" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" />
<h1>动画</h1>
<img id="zoom_05" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" />
<h1>鼠标滚动</h1>
<img id="zoom_06" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg" />

jQuery

6中不同的放大镜效果代码都很简单，代码都已翻译注释：

$('#zoom_01').elevateZoom({});//默认效果

$('#zoom_02').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 //是否开启鼠标滚动
});