jquery.ez-plus.js是一款jQuery图片放大镜插件。该jQuery图片放大镜插件支持图片内部放大,外部放大,支持轮播图片,可以和ColorBox或Fancy Box 结合使用。
安装
可以通过npm或bower来安装jquery.ez-plus.js插件。
bower install ez-plus npm 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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!