PEIYANGXINQU

 

点击图片后放大居中显示

主要是要考虑浏览器的兼容性和样式
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title></title>
 6 <style type="text/css">
 7 <!--
 8 html,body { width:auto; height:auto; margin:0 auto;font-size:12px;}
 9 .mydiv {           /*弹出时的方框*/
10 text-align:center;
11 background-color: #FFCC66;
12 border: 1px solid #f00;
13 z-index:999;
14 width: 500px;
15 height:400px;
16 left:50%;/*FF IE7*/
17 top:35%;/*FF IE7*/
18 margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
19 margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
20 margin-top:0px;
21 position:fixed!important;/*FF IE7*/
22 position:absolute;/*IE6*/
23 
24 _top:expression(eval(document.compatMode &&
25 document.compatMode=='CSS1Compat') ?
26 documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
27 document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
28 
29 }
30 .bg,.popIframe {      /*弹出时整个框背景颜色*/
31 background-color: #666; display:none;
32 width: 100%;
33 height: 100%;
34 left:0;
35 top:0;/*FF IE7*/
36 filter:alpha(opacity=50);/*IE*/
37 opacity:0.5;/*FF*/
38 z-index:1;position:fixed!important;/*FF IE7*/
39 position:absolute;/*IE6*/_top:       expression(eval(document.compatMode &&
40 document.compatMode=='CSS1Compat') ?
41 documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
42 document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
43 } 
44 .popIframe {
45 filter:alpha(opacity=0);/*IE*/
46 opacity:0;/*FF*/
47 }
48 body a img{border: 2px  solid #CCF}
49 --> 
50 </style>
51 <script language="javascript" type="text/javascript">
52 function showDiv(url){
53 document.getElementById('popDiv').style.display='block';
54 //document.getElementById('popIframe').style.display='block';
55 document.getElementById('bg').style.display='block';
56 document.getElementById('popImg').src=url;
57 
58 }
59 function closeDiv(){
60 document.getElementById('popDiv').style.display='none';
61 document.getElementById('bg').style.display='none';
62 document.getElementById('popIframe').style.display='none';
63 }</script>
64 </head>
65 <body>
66 
67 <!--弹出时的图片-->
68 <div id="popDiv" class="mydiv" style="display:none;">
69 <img id='popImg' src="images/1.jpg" width="500" height="380" />
70 <span style="display:block; margin-top:5px;"><a href="javascript:closeDiv()">关闭窗口</a></span>
71 </div>
72 
73 
74 <!--未弹出时的图片-->
75 <div id="bg" class="bg" style="display:none;"></div><div style="height:1400px;">
76 <a href="javascript:showDiv('images/1.jpg')"><img src="images/1.jpg" width="131" height="84" /></a>
77 <br />
78 <a href="javascript:showDiv('images/3.jpg')"><img src="images/3.jpg" width="131" height="84" /></a>
79 <br />
80 <a href="javascript:showDiv('images/4.jpg')"><img src="images/4.jpg" width="131" height="84" /></a>
81 </div>
82 
83 
84 
85 
86 //<iframe id='popIframe' class='popIframe' frameborder='0' ></iframe>
87 </body>
88 </html>
View Code

http://download.csdn.net/detail/yekeyishuo/6468265

posted on 2013-10-29 01:35  PEIYANGXINQU  阅读(449)  评论(0)  编辑  收藏  举报

导航