web/res/js/jquery-imgview.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

/**
*	图片查看
*	createname：雨中磐石
*	homeurl：http://www.rockoa.com/
*	Copyright (c) 2016 rainrock (xh829.com)
*	Date:2016-01-01
*/

(function ($) {
	
	function get(id){return document.getElementById(id)};
	
	function funclass(opts, obj){
		if(!opts)opts={};
		var me = this;
		this.ismobile = false;
		this.downbool = true;
		this.dushu	  = 0;
		this.onloadsuccess=function(){};
		this.init=function(){
			if(get('imgview_main'))return;
			for(var i in opts)this[i]=opts[i];
			if(obj)this.url=obj.attr('src');
			this.mheiht = document.body.scrollHeight,sed=$(window).height();
			if(this.mheiht<sed)this.mheiht=sed;
			this.showview();
		};
		this.remove=function(){
			$('#imgview_main').remove();
		};
		this.showview=function(){
			var s='<div id="imgview_main" style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:800">';
			s+='<div style="position:absolute;z-index:0;left:0px;top:0px;width:100%;height:'+this.mheiht+'px;background-color:rgba(0,0,0,0.6)" id="imgview_mask"></div>';
			s+='<span onclick="$(this).parent().remove()" style="position:fixed;z-index:2;top:2px;right:5px;color:white"><i class="icon-remove"></i></span>';
			s+='<div id="imgview_span" style="position:fixed;z-index:1;left:47%;top:47%;overflow:hidden;color:white">';
			s+='	<div id="imgview_spanmask"  style="position:absolute;z-index:1;left:0px;top:0px;background-color:rgba(0,0,0,0);width:100%;height:100%;cursor:move;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-khtml-user-select:none;"></div>';
			s+='	<img style="position:absolute;z-index:0;left:0px;top:0px" id="imgview_spanimg" width="100%" height="100%" src="images/mloading.gif" >';
			s+='</div>';
			s+='<div style="position:fixed;z-index:2;left:0px;bottom:0px;text-align:center;color:white;width:100%;font-size:20px;background-color:rgba(0,0,0,0.2);height:40px;line-height:40px;overflow:hidden;user-select:none"><i style="cursor:pointer" id="imgview_zoom-out" class="icon-zoom-out" title="缩小"></i> &nbsp; <span id="imgview_nowbili" style="font-size:14px">100%</span> &nbsp; <i style="cursor:pointer" class="icon-zoom-in" title="放大" id="imgview_zoom-in"></i>';
			s+='  &nbsp; <i style="cursor:pointer" class="icon-move" title="原始大小" id="imgview_zoom-move"></i>';
			if(!this.ismobile && this.downbool)s+='  &nbsp; <a target="_blank" download="" style="color:white;font-size:20px" href="'+this.url+'"><i style="cursor:pointer" class="icon-download-alt" title="下载"></i></a>';
			s+='  &nbsp; <i style="cursor:pointer" class="icon-refresh" title="旋转90度" id="imgview_zoom-refresh"></i>';
			s+='</div>';
			s+='</div>';
			$('body').append(s);
			$('#imgview_mask').click(function(){
				$('#imgview_main').remove();
			});
			this.showez(32,32,0);
			var img = new Image();
			img.src = this.url;
			img.onload = function(){
				if(get('imgview_main')){
					me.showez(this.width,this.height, 1);
					try{
					$('#imgview_span').mousewheel(function(e){
						me.bilixxx(e.deltaY*0.1);
					});}catch(e){}
					me.rotate(me.dushu);
					me.initmove();