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

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

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

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

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

1	<pre class="brush:css; toolbar: true; auto-links: false;">#preview{

2	width:372px;

3	height:325px;

4

}</pre>

01	<pre class="brush:js; toolbar: true; auto-links: false;">//查找.zm-image里面有无图片

02	function hasPic($element){

03	'use strict';

04	var exist = $(".zm-image").attr("style");

05	console.log(exist);

06	if(exist == undefined)

07	return false;

08	//对于ie来说 exit解析出来是background: url("../../image/report/2013-07-31-78f35826.png")

09	//background: 冒号后面多了一个空格

10	//检测有无background属性

11	exist = exist.indexOf('background');

12	if( exist >= 0)

13	return true;

14

else

15	return false;

16

}

17	function zmShow($e){

18	console.log("show");

19	if( hasPic($(this)) ){

20

21	//移除之前生成的弹出框

22	$(".zm-imageWrap").remove();

23	var image = "<divclass='zm-imageWrap'>" +

24	"<divclass='zm-imagepop'></div>" +

25	"<imgclass='zm-imageInner'/>" +

26

"</div>";

27	//在body下加入弹出框

28	$("body").append(image);

29	$(".zm-imageWrap").hide();

30	//path 得到原始图片的路径

31	var path = $e.css("background-image");

32	path = path.substring(4,path.length-1);

33	path = path.replace("http://localhost/afforest/","../../");

34	//谷歌../../image/report/2013-07-31-1ec67d38.jpg ff："../../image/report/2013-07-31-1ec67d38.jpg"

35	//所以针对ff浏览器 去掉引号

36	if(path[0] == '"')

37	path = path.substring(1,path.length-1);

38	console.log(path+"path");

39	//path = "../"+$("#imagePath").val(); //修改zs1314zt

40

//添加路径

41	$("img.zm-imageInner").attr("src",path);

42	//生成image类 计算原始图片宽度和高度

43	var originImage=new Image();

44	originImage.src=path;

45	//由于image类解析图片需要时间 设置延迟 获得高度和宽度

46	window.setTimeout(function(){

47	//把图片的中心放在屏幕中心

48	var Width = originImage.width;

49	var Height = originImage.height;

50	var zmleft = (window.innerWidth-Width)/2;

51	var zmtop = (window.innerHeight-Height)/2;

52	console.log(zmleft+" "+zmtop+" "+ Width+" "+Height+" "+window.innerWidth+" "+window.innerHeight);

53	$(".zm-imageInner").css("left",zmleft).css("top",zmtop);

54	$(".zm-imageWrap").show();

55

}, 100);

56

}

57	$(".zm-imageWrap").click(function(){

58	$(this).remove();

59

});

60

}</pre>