Html 点击小图查看大图
Posted BandaYung
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Html 点击小图查看大图相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
点击小图切换大图
</title>
<style>
.small_img,.big_img
cursor: pointer;
.black_overlay
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
.big_img
display: none;
position: absolute;
width: 120px;
height: 120px;
left: 50%;
top: 50%;
margin: -60px 0px 0px -60px;
z-index:1002;
overflow: auto;
</style>
</head>
<body>
<img class="small_img" src ="img/icon_title_bar.png" onclick="document.getElementById('light').style.display ='block';document.getElementById('fade').style.display='block'"/>
<img id="light" class="big_img" src ="img/icon_title_bar.png" onclick = "document.getElementById('light').style.display ='none' ;document.getElementById('fade').style.display='none'"/>
<div id="fade" class="black_overlay"></div>
</body>
</html>
以上是关于Html 点击小图查看大图的主要内容，如果未能解决你的问题，请参考以下文章