这个JavaScript实例展示了如何通过点击小图来显示大图。当点击图片时，会在页面上创建一个黑色半透明的遮罩层，并在其中显示大图。用户可以点击大图关闭预览或者按键盘任意键返回。该功能适用于网页中图片预览的需求。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-点击图片显示大图</title>
<style>
img{padding:5px;width:100px;height:auto;}
#outer{
width:100%;
height:100%;
}
.overlay{
background-color:#000;
opacity: .7;
filter:alpha(opacity=70);
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index: 10;
}
.overlayimg{
position: absolute;
z-index: 11;
left:50px;
top:30px;
width:auto;
}
</style>
<script>
function expandPhoto(){
var overlay = document.createElement("div");
overlay.setAttribute("id","overlay");
overlay.setAttribute("class","overlay");
document.body.appendChild(overlay);
var img = document.createElement("img");
img.setAttribute("class","overlayimg");
img.src = this.getAttribute("src");
document.getElementById("overlay").appendChild(img);
img.onclick = restore;
}
function restore(){
document.body.removeChild(document.getElementById("overlay"));
document.body.removeChild(document.getElementById("img"));
}
window.onload = function(){
var imgs = document.getElementsByTagName("img");
imgs[0].focus();
for(var i = 0;i<imgs.length;i++){
imgs[i].onclick = expandPhoto;
imgs[i].onkeydown = expandPhoto;
}
}
</script>
</head>
<body>
<div id = "outer">
<p>点击图片</p>
<img src="http://e.hiphotos.baidu.com/image/pic/item/77094b36acaf2edde7684cc38e1001e93901937a.jpg" />
<img src="http://e.hiphotos.baidu.com/image/pic/item/77094b36acaf2edde7684cc38e1001e93901937a.jpg" />
</div>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
