微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery插件 - elevateZoom放大镜

前言:
elevateZoom是一个图片放大插件支持多种放大方式,强大且简单。

用法
单张图片实现放大效果

多张缩略图实现切换放大效果

参数:

参数 认值 允许值 描述
responsive false true, false 设置为true时启用响应式
scrollZoom false true, false 设置为true时启动鼠标滚轮进行缩放
loadingIcon false true, false 是否启用载入图标
easing false true, false 是否启用缓慢过渡
easingType zoomdefault true, false 认过渡类型是eaSEOutExpo:(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b;继承jquery过渡类型
easingDuration 2000 Number 过渡时长
lensSize 200 Number 设置镜头的大小,当设置为窗口时,将会自动计算大小
zoomWindowWidth 400 Number 放大窗口的宽度 注意:zoomType必须是Window
zoomWindowHeight 400 Number 放大窗口的高度 注意:zoomType必须是Window
zoomWindowOffetx 0 Number 设置Window X轴的偏移量
zoomWindowOffety 0 Number 设置Window Y轴的偏移量
zoomWindowPosition 1 1-16 一旦定位,请使用zoomWindowOffetx,zoomWindowOffety进行调整
lensFadeIn false Number 设置镜头淡入速度 eg:200
lensFadeOut false Number 设置镜头淡出速度 eg:200
zoomWindowFadeIn false Number 设置窗口淡入速度 eg:200
zoomWindowFadeOut false Number 设置窗口的淡出速度 eg:200
zoomTintFadeIn false Number 设置淡入着色的速度 eg:200
zoomTintFadeOut false Number 设置着色淡出的速度 eg:200
borderSize 4 Number 镜头边框的尺寸 eg:1
zoomLens true true, false 设置为false隐藏镜头
borderColour #888 #xxx 镜头边框的颜色
lensBorder 1 Number 镜头边框像素
lensShape square round,square 设置镜头形状
zoomType window Lens, Window, Inner 放大类型
containLensZoom false Number 在zommType为len时使用,确保镜头不会在边框外
lensColour white #hex, word (red, blue), or rgb(x, x, x) 设置镜头背景
lensOpacity 0.4 Number 镜头透明度
lenszoom false true, false 设置镜头变焦
tint false true, false 是否开启着色
tintColour #333 #hex, word (red, blue), or rgb(x, x, x) 设置色彩
tintOpacity 0.4 Number 设置颜色透明度
cursor default default, cursor, crosshair 设置鼠标的风格
gallery null id 设置关联缩略图
imageCrossfade false true, false 设置缩略图激活时淡入淡出

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐