欢迎光临一流素材网,免积分免费素材下载!
AD
当前位置:首页 > JS代码 > 图片特效

三种效果的JS放大镜插件-elevateZoom

所属栏目:图片特效更新时间:2020-11-15原作者:elevatezoom来源:elevatezoom发布者:deepdfhy浏览:0
基本信息

使用方法

页面引用

<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.elevatezoom.min.js"></script>


图片

<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
<script>
    $('#zoom_01').elevateZoom();
</script>

参数:

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

默认值: false

允许值: Number

描述:设置着色淡出的速度 eg:200

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

允许值:

描述:设置镜头背景

lensOpacity

默认值: 0.4

允许值: Number

描述:镜头透明度

lenszoom

默认值: 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

描述:设置鼠标的风格


标签: 放大镜 放大
代码下载
本地下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1JS自动给img src添加域名前缀的代码

2可全尺寸放大随意拖动查看的看图jQuery插件-Picbox

3点击图片更换图片的代码

4像纸一样展开的效果

5css3图片变换形状特效

7JS图片翻转翻页效果代码

8产品图片360度旋转展示效果代码

9jquery hover图片滑动特效代码

10jQuery鼠标悬停图片翻牌滑动切换显示代码

最新更新的

1exzoom-一款jquery商城商品放大镜插件

2加强版JS放大镜插件-elevatezoom-plus

3三种效果的JS放大镜插件-elevateZoom

4jQuery图片放大镜效果

5jQuery图片滑动翻牌效果

6JS网页图片延迟加载代码

7css3图片变换形状特效

8jquery hover图片滑动特效代码

9点击图片更换图片的代码

10JS自动给img src添加域名前缀的代码