缩略图预览mini库
这是一个依赖jquery的mini库文件,主要用于缩略图的预览:
如下一张缩略图,实际图片大小比这个要大许多
![](https://images2015.cnblogs.com/blog/661187/201602/661187-20160226151650068-1943368850.png)
利用这个jquery插件,只需将要缩略图、原图切换的元素使用$('jquery选择器image').viewImage();就可以点击切换显示这张图片。
简单易用。点击效果图如下:
![](https://images2015.cnblogs.com/blog/661187/201602/661187-20160226152036146-1431628872.png)
下面贴出完整代码:极其剪短
(function($,factory){ if(typeof define === 'object' && typeof require === 'object'){ define([ 'jquery' ],function($){ factory() }); }else{ factory($); } })(jQuery,function(){ var ImageViewer = function(element){ var naturalHeight, naturalWidth; this.$element = $(element); this.naturalWidth = element.naturalWidth; this.naturalHeight = element.naturalHeight; this.$viewerContainer = $('.viewer-container'); this.$viewerContainer.on('click',this.hide.bind(this)); this.$element.on('click',this.show.bind(this)); }; ImageViewer.prototype.show=function(){ this.$viewerContainer.empty() .css({ 'zIndex':1, 'height',this.naturalHeight+'px' }).append(this.$element.get(0).outerHTML) .show().find('img').css({ 'cursor':'zoom-out', 'maxHeight':'100%' }); }; ImageViewer.prototype.hide=function(){ this.$viewerContainer.empty().hide(); }; function Plugin(){ var $viewerContainer = $('<div class="viewer-container"></div>'); $viewerContainer.css({ position:'fixed', left:0, right:0, top:0, bottom:0, margin:'auto', 'textAlign':'center', 'maxHeight':'100%', 'zIndex':-1 }); $viewerContainer.appendTo(document.body); return this.each(function(){ new ImageViewer(this); }); } $.fn.viewImage = Plugin; });
希望对任何需要的人有所帮助。。。。啦啦啦