jquery点击图片让图片显示在屏幕中间

2019独角兽企业重金招聘Python工程师标准>>>

注意点：

1.解析图片资源需要时间   所以设置定时器

2.从div里面获取的background属性值   是绝对路径  要转化为相对的

3.火狐和谷歌和ie获取的background的路径问题

<div class="hidden border pointer zm-image" id="preview" onclick=zmShow($(this))></div>

#preview{
	width:372px;
	height:325px;
}

//查找.zm-image里面有无图片
function hasPic($element){
	'use strict';
	var exist = $(".zm-image").attr("style");
	console.log(exist);
	if(exist == undefined)
		return false;
	//对于ie来说   exit解析出来是background: url("../../image/report/2013-07-31-78f35826.png")    
	//background: 冒号后面多了一个空格
	//检测有无background属性
	exist = exist.indexOf('background');
	if( exist >= 0)
		return true;
	else
		return false;		
}
function zmShow($e){
	console.log("show");
	if( hasPic($(this)) ){
		
		 //移除之前生成的弹出框
		$(".zm-imageWrap").remove();    
		var image = "<div class='zm-imageWrap'>" +
		"<div class='zm-imagepop'></div>" +
		"<img class='zm-imageInner'/>" +
		"</div>";
		//在body下加入弹出框
		$("body").append(image);
		$(".zm-imageWrap").hide();
		//path  得到原始图片的路径
		var path = $e.css("background-image");
		path = path.substring(4,path.length-1);
		path = path.replace("http://localhost/afforest/","../../");
		//谷歌../../image/report/2013-07-31-1ec67d38.jpg ff："../../image/report/2013-07-31-1ec67d38.jpg"
		//所以针对ff浏览器  去掉引号
		if(path[0] == '"')
			path = path.substring(1,path.length-1);
		console.log(path+"path");
		//path = "../"+$("#imagePath").val();                          //修改zs1314zt
		//添加路径
		$("img.zm-imageInner").attr("src",path);
		//生成image类   计算原始图片宽度和高度
		var originImage=new Image();
		originImage.src=path;
		//由于image类解析图片需要时间   设置延迟  获得高度和宽度
		window.setTimeout(function(){
			//把图片的中心放在屏幕中心
			var Width = originImage.width;
			var Height = originImage.height;
			var zmleft = (window.innerWidth-Width)/2;
			var zmtop = (window.innerHeight-Height)/2;
			console.log(zmleft+"   "+zmtop+" "+ Width+" "+Height+" "+window.innerWidth+" "+window.innerHeight);
			$(".zm-imageInner").css("left",zmleft).css("top",zmtop);	
			$(".zm-imageWrap").show();
		}, 100);
	}
	$(".zm-imageWrap").click(function(){
		$(this).remove();
	});
}

转载于:https://my.oschina.net/u/1241513/blog/149329