编程
您现在的位置:首页 >> 编程

点击小图无刷新显示大图

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 

<head>

<title>点击小图无刷新显示大图</title> 

<style> 

.black_overlay{ 

display: none; 

position: absolute; 

top: 0%; 

left: 0%; 

width: 100%; 

height: 100%; 

background-color: white; 

z-index:1001; 

-moz-opacity: 0.8; 

opacity:.80; 

filter: alpha(opacity=80); 

 .white_content { 

display: none; 

 position: absolute; 

top: 25%; 

left: 25%; 

width: 46%; 

height: 50%; 

padding: 13px; 

border: 16px solid orange; 

background-color: white; 

z-index:1002; 

overflow: auto; 

 .codefans_net

{

width:420px;

height:210px;

background-color:#efefef;

color:#666;

border-width:1px;

border-color:#999;

border-style:solid;

margin:6px;

padding:6px;

font-Size:14px;

line-height:200%;

float:midden;

}

</style> 

</head> 

<body> 

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img  border="0" src="tool/ExamplePic/example1.jpg" width="100" height="62"></a> 

<div id="light" class="white_content" style="position: absolute; left: 336px; top: 133px; width: 430px">

<a target="_blank" href="#">

<img border="0" src="tool/ExamplePic/example1.jpg" width="350" height="216"></a> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">关闭</a></div> 

<div id="fade" class="black_overlay"></div></p>

</body> 

</html>