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{ |
01 | < pre class = "brush:js; toolbar: true; auto-links: false;" >//查找.zm-image里面有无图片 |
02 | function hasPic($element){ |
04 | var exist = $(".zm-image").attr("style"); |
06 | if(exist == undefined) |
08 | //对于ie来说 exit解析出来是background: url("../../image/report/2013-07-31-78f35826.png") |
09 | //background: 冒号后面多了一个空格 |
11 | exist = exist.indexOf('background'); |
19 | if( hasPic($(this)) ){ |
22 | $(".zm-imageWrap").remove(); |
23 | var image = "< div class = 'zm-imageWrap' >" + |
24 | "< div class = 'zm-imagepop' ></ div >" + |
25 | "< img class = 'zm-imageInner' />" + |
28 | $("body").append(image); |
29 | $(".zm-imageWrap").hide(); |
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" |
37 | path = path.substring(1,path.length-1); |
38 | console.log(path+"path"); |
39 | //path = "../"+$("#imagePath").val(); //修改zs1314zt |
41 | $("img.zm-imageInner").attr("src",path); |
42 | //生成image类 计算原始图片宽度和高度 |
43 | var originImage=new Image(); |
45 | //由于image类解析图片需要时间 设置延迟 获得高度和宽度 |
46 | window.setTimeout(function(){ |
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(); |
57 | $(".zm-imageWrap").click(function(){ |