建站资源下载详情
为您免费提供多种建站资源下载，包括网站模板下载、前端插件下载和字体下载！您只需注册为会员即可任意下载！
JQuery图片放大镜插件elevetezoom
简介
elevateZoom 是一个定制性非常高的 jQuery 放大镜插件，可实现类似淘宝中的查看大图效果。它能够对一张图片或两张图片(一张缩略图和一张大图)实现放大效果。放大图片的位置可自定义设置，并且支持内缩放，使用放大镜镜头展示大图。它还内置了一个相册展示的模式，可同时展示多张可缩放的图片。它自带了淡入淡出、easing 等多种效果。
 |
|---|
使用
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. 配置
| 参数 | 描述 | 默认值 |
| 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 |
相关链接
GitHub 地址 ： https://github.com/elevateweb/elevatezoom
效果演示 ： https://www.jq22.com/yanshi23497
更多相似前端插件