每天一个JavaScript实例-点击图片显示大图添加鼠标操作
来源：程序员人生 发布时间：2014-11-07 08:16:40 阅读次数：2878次
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF⑻" />
<title>每天1个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 imgKeyDown(evnt){
//console.log("aaa");
evnt = (evnt) ? event : ((window.event) ? window.event : "");
var keycode = (event.which) ? evnt.which : evnt.keyCode;
//console.log(keycode);
//console.log(evnt);
if(document.getElementById("overlay")){
if(keycode == 27){
restore();
return false;
}else{
if(keycode == 13){
restore();
return false;
}
}
}
}
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.blur();
document.onkeydown = imgKeyDown;
img.onclick = restore;
}
function restore(){
document.body.removeChild(overlay);
//document.body.removeChild(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>
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
