建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery图片放大镜插件elevetezoom

来源:易助科技网浏览量:20收藏

简介


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


JQuery图片放大镜插件elevetezoom-示例图



使用


1.  引入  jquery.js 和 elevetezoom.js 文件


2.  HTML


添加需要放大显示的图片,data-zoom-image 属性设置的是大图路径 :


<img id="zoom_demo" src='small.png' data-zoom-image="large.jpg"/>


3.  调用


$('#zoom_demo').elevateZoom()


4.  配置


参数描述默认值
responsiveSet 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
scrollZoomSet to true to activate zoom on mouse scroll. Possible Values:FALSE
imageCrossfadeSet to true to activate simultaneous crossfade of images on gallery
 change. Possible Values:
FALSE
loadingIconSet to the url of the spinner icon to activatFALSE
easingSet to true to activate easing.FALSE
easingTypedefault 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
lensSizeused when zoomType set to lens, when zoom type is set to window, then the
 lens size is auto calculated
200
zoomWindowWidthWidth of the zoomWindow (Note: zoomType must be400
zoomWindowHeightHeight of the zoomWindow (Note: zoomType must be400
zoomWindowOffetxx-axis offset of the zoom window0
zoomWindowOffetyy-axis offset of the zoom window0
zoomWindowPositionOnce positioned, use zoomWindowOffsetx and zoomWindowOffsety to adjust
 Possible values: 1-16
1
zoomTintFadeInSet as a number e.g 200 for speed of Tint fadeInFALSE
zoomTintFadeOutSet as a number e.g 200 for speed of Tint fadeOutFALSE
borderSizeBorder Size of the ZoomBox - Must be set here as border taken into
 account for plugin calculations
4
galleryThis assigns a set of gallery links to the zoom imagenull
tintenable a tint overlay, other options: trueFALSE
tintColourcolour of the tint, can be #hex, word (red, blue), or rgb(x, x, x)#333
tintOpacity0.4opacity of the tint
zoomLensset to false to hide the LensTRUE



相关链接


GitHub 地址 : https://github.com/elevateweb/elevatezoom

效果演示 :  https://www.jq22.com/yanshi23497