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

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 = "<

div

class

=

'zm-imageWrap'

>" +

24

"<

div

class

=

'zm-imagepop'

></

div

>"
+

25

"<

img

class

=

'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

>