您的位置：首页 > Web前端 > JavaScript

每天一个JavaScript实例-点击图片显示大图添加鼠标操作

2014-10-31 16:50 507 查看

<!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 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航