手机版 | ------------全站资源有,统一解压码,解码平台,请点这里 ------------ 设首页 | 加收藏
当前位置: 网站首页 > jQuery库 > 文章 当前位置: jQ > 文章

jQuery图片放大镜插件ez-plus.js

时间:2020-06-30    点击: 次    来源:网络    作者:佚名 - 小 + 大

jQuery图片放大镜插件ez-plus.js
简要教程

jquery.ez-plus.js是一款jQuery图片放大镜插件。该jQuery图片放大镜插件支持图片内部放大,外部放大,支持轮播图片,可以和ColorBox或Fancy Box 结合使用。

安装

可以通过npm或bower来安装jquery.ez-plus.js插件。

bower install ez-plusnpm install ez-plus                       

使用方法

在页面中引入jquery和jquery.ez-plus.js"文件。

<script src="js/jquery.min.js"></script><script src="js/jquery.ez-plus.js""></script>                         
HTML结构

在页面中插入一张图片。

<img id="zoom_01" src="images/large/image1.jpg" width="400"/>                
初始化插件

然后会通过下面的方法来初始化该jQuery图片放大镜插件。

$("#zoom_01").ezPlus();                

配置参数

jquery.ez-plus.js插件的可用的配置参数如下:

$("#demo").ezPlus({  container: 'ZoomContainer',  attrImageZoomSrc: 'zoom-image', // attribute to plugin use for zoom  borderColour: '#888',  borderSize: 4,  constrainSize: false,  //in pixels the dimensions you want to constrain on  constrainType: false,  //width or height  containLensZoom: false,  cursor: 'inherit', // user should set to what they want the cursor as, if they have set a click function  debug: false,  easing: false, // easing effects  easingAmount: 12,  enabled: true,  // gallery options  gallery: false,  galleryActiveClass: 'zoomGalleryActive',  gallerySelector: false,  galleryItem: 'a',  galleryEvent: 'click',  // enable cross-fade effect  imageCrossfade: false,  // lens options  lensBorderColour: '#000',  lensBorderSize: 1,  lensColour: 'white', //colour of the lens background  lensFadeIn: false,  lensFadeOut: false,  lensOpacity: 0.4, //opacity of the lens  lensShape: 'square', //can be 'round'  lensSize: 200,  lenszoom: false,  // image loading spinner  loadingIcon: false, //http://www.example.com/spinner.gif  // This change will allow to decide if you want to decrease  // zoom of one of the dimensions once the other reached it's top value,  // or keep the aspect ratio, default behaviour still being as always,  // allow to continue zooming out, so it keeps retrocompatibility.  mantainZoomAspectRatio: false,  maxZoomLevel: false,  minZoomLevel: 1.01,  // callbacks  onComplete: $.noop,  onDestroy: $.noop,  onImageClick: $.noop,  onImageSwap: $.noop,  onImageSwapComplete: $.noop,  onShow: $.noop,  onHide: $.noop,  onZoomedImageLoaded: $.noop,  preloading: 1, //by default, load all the images, if 0, then only load images after activated (PLACEHOLDER FOR NEXT VERSION)  respond: [],  responsive: true,  scrollZoom: false, //allow zoom on mousewheel, true to activate  scrollZoomIncrement: 0.1,  //steps of the scrollzoom  showLens: true,  tint: false, //enable the tinting  tintColour: '#333', //default tint color, can be anything, red, #ccc, rgb(0,0,0)  tintOpacity: 0.4, //opacity of the tint  touchEnabled: true,  // zoom options  zoomActivation: 'hover', // Can also be click (PLACEHOLDER FOR NEXT VERSION)  zoomContainerAppendTo: 'body', //zoom container parent selector  zoomId: -1, // identifier for the zoom container  zoomLevel: 1, //default zoom level of image  zoomTintFadeIn: false,  zoomTintFadeOut: false,  zoomType: 'window', //window is default,  also 'lens' available -  zoomWindowAlwaysShow: false,  zoomWindowBgColour: '#fff',  zoomWindowFadeIn: false,  zoomWindowFadeOut: false,  zoomWindowHeight: 400,  zoomWindowOffsetX: 0,  zoomWindowOffsetY: 0,  zoomWindowPosition: 1, //Possible values: 1-16, but we can also position with a selector string.  zoomWindowWidth: 400,  zoomEnabled: true, //false disables zoomwindow from showing  zIndex: 999});                                  

 该jQuery图片放大镜插件的github地址为:https://github.com/igorlino/elevatezoom-plus

 jQuery图片放大镜插件ez-plus.js 本地下载

上一篇:jQuery固定背景视觉滚动特效插件

下一篇:js点击按钮动画粒子特效

浙ICP备18035339号-15  |   QQ:79720816  |  地址:蚂蚁分享-一个只做有用的分享。  |  13388629007  |  
Copyright © 2023 蚂蚁分享网 版权所有,授权www.tanan.net使用 Powered by ANTQQ.COM