简单弹窗

 

 

 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=utf-8" />
 5 <title>弹窗测试</title>
 6 <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
 7 </head>
 8 
 9 <body>
10 <script type="text/javascript" language="javascript">
11     $(document).ready(function () {
12         //$("#btn_center").click(function () {
13         //    hcOpenwin();
14         //});
15     }); 
16 </script>
17 <div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;">
18   <input type="button" value="居中窗口" id="btn_center" onclick="hcOpenwin()" />
19 </div>
20 <style type="text/css"> 
21 .hcw_window{  width:300px;  background-color:#FFAD41;  position:absolute; 
22     padding:2px; margin:5px;  display:none; z-index:999; } 
23 .hcw_content{  height:368px;  background-color:#FFECA7;  font-size:14px; 
24     overflow:auto;  } 
25 .hcw_title{ padding:0 0 2px 2px; color:#FFF; font-size:14px;
26     font-weight:bolder; } 
27 .hcw_title img{ float:right; } 
28 </style>
29 <div class="hcw_window" id="hcwin0">
30   <div id="hcw_title" class="hcw_title"><img src="//images0.cnblogs.com/blog/361114/201409/111642011067632.jpg" alt="关闭" />注册抢购</div>
31   <div class="hcw_content"> 弹窗测试 </div>
32 </div>
33 <script type="text/javascript">
34 //data{id:windowid,pre:classpre,relattop:relattop,relatleft:relatleft}
35 function hcOpenwin(data){
36     var windowHeight = $(window).height(); 
37     var windowWidth = $(window).width();
38     if(typeof(data)!='object') var data = new Object();
39     if(!data.id) data.id = 'hcwin0';
40     var popWidth = $("#"+data.id).width();
41     var popHeight = $("#"+data.id).height();
42     var popY=(windowHeight-popHeight)/2;
43     var popX=(windowWidth-popWidth)/2;
44     if(!data.pre) data.pre = 'hcw_';
45     $("#"+data.id).css("top",popY).css("left",popX).css("display","block");
46     $("#"+data.pre+"title img").click(function(){ 
47         $(this).parent().parent().css("display","none"); 
48     });
49 }
50 </script>
51 </body>
52 </html>

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单大图</title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

<div id="hcw_miniimg" style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;">
<img src="//images0.cnblogs.com/blog/361114/201409/241740531074519.jpg" bigsrc="//images0.cnblogs.com/blog/361114/201409/241742317175978.jpg"  onclick="hcOpenwin($(this).attr('bigsrc'))" />
</div>
<style type="text/css"> 
.hcw_window{  background-color:#FFAD41;  position:absolute; 
    padding:2px 2px; margin:5px;  display:none; z-index:999; } 
#hcw_title img{position:absolute;} 
</style>
<!--大图区-->
<div class="hcw_window" id="hcwin0">
  <div id="hcw_title"> <div><img src="//images0.cnblogs.com/blog/361114/201409/111642011067632.jpg" alt="关闭" /></div></div>
<img id="bigimg" src="" />
</div>
<script type="text/javascript">

function hcOpenwin(data){
    var windowHeight = $(window).height(); 
    var windowWidth = $(window).width();
    $("#bigimg").attr('src',data);
    var bigimage = new Image(); //新建一个图片对象 
    bigimage.src = data; 
    var popWidth = bigimage.width;
    var popHeight = bigimage.height;
    var popY=(windowHeight-popHeight)/2;
    var popX=(windowWidth-popWidth)/2;
    $("#hcwin0").css({"height" : popHeight+'px',"width":popWidth+'px',"top":popY+'px',"left":popX+'px',"display":"block"});
    $("#hcw_title img").css({"left":(popWidth-26)+'px',"top":'2px'});
    $("#hcw_title img").click(function(){ 
        $(this).parent().parent().css("display","none"); 
    });
}
function loadbigimage(){
    var imageObjArr = new Array();
    var images = document.getElementById("hcw_miniimg").getElementsByTagName("img");
    for(var i=0;i<images.length;i++){
        imageObjArr[i] = new Image();
        if(images[i].tagName == "IMG"){
            imageObjArr[i].src=images[i].getAttribute('bigsrc');
        }
    }
}

window.onLoad=loadbigimage();
</script>

</body>
</html>
View Code

 

imageObjArr = new Array();
var images = document.getElementById("hcw_miniimg").getElementsByTagName("img");

 

function loadbigimage1(){
     var imageObj = new Image();
     var images = new Array('241742317175978.jpg');
     var presrc = '//images0.cnblogs.com/blog/361114/201409/';
     for(i=0; i<images.length; i++) 
     {
          imageObj.src=presrc+images[i];
     } 
}

 

  

posted @ 2014-09-11 16:43  goldenstones  阅读(170)  评论(0)  编辑  收藏  举报