最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2015-05-21 07:48浏览(1655)

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

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

jQuery结合elevateZoom演示多种放大镜效果
分类:图片代码 > 放大镜 难易:中级
查看演示

加我微信,拉你进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 //是否开启鼠标滚动
});
参数 描述 默认值
responsive Set to true to activate responsivenes. If you have a theme which changes size, or tablets which change orientation this is needed to be on. Possible Values: false
scrollZoom Set to true to activate zoom on mouse scroll. Possible Values: false
imageCrossfade Set to true to activate simultaneous crossfade of images on gallery change. Possible Values: false
loadingIcon Set to the url of the spinner icon to activat false
easing Set to true to activate easing. false
easingType default easing type is easeOutExpo, (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b Extend jquery with other easing types before initiating the plugin and pass the easing type as a string value. zoomdefault

easingDuration

lensSize used when zoomType set to lens, when zoom type is set to window, then the lens size is auto calculated 200
zoomWindowWidth Width of the zoomWindow (Note: zoomType must be 400
zoomWindowHeight Height of the zoomWindow (Note: zoomType must be 400
zoomWindowOffetx x-axis offset of the zoom window 0
zoomWindowOffety y-axis offset of the zoom window 0
zoomWindowPosition Once positioned, use zoomWindowOffsetx and zoomWindowOffsety to adjust Possible values: 1-16 1
zoomTintFadeIn Set as a number e.g 200 for speed of Tint fadeIn false
zoomTintFadeOut Set as a number e.g 200 for speed of Tint fadeOut false
borderSize Border Size of the ZoomBox - Must be set here as border taken into account for plugin calculations 4
gallery This assigns a set of gallery links to the zoom image null
tint enable a tint overlay, other options: true false
tintColour colour of the tint, can be #hex, word (red, blue), or rgb(x, x, x) #333
tintOpacity 0.4 opacity of the tint
zoomLens set to false to hide the Lens true
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/127.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    09-25 08:25
    ngu137
    厉害hi了,功能真齐全啊啊。。。
1 2