一天JavaScript示例-点击图片显示大图片添加鼠标

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-点击图片显示大图加入鼠标操作</title>
<style>
	img{padding:5px;100px;height:auto;}
	#outer{
		100%;
		height:100%;
	}
	.overlay{
		background-color:#000;
		opacity: .7;
		filter:alpha(opacity=70);
		position: fixed;
		top:0;
		left:0;
		100%;
		height:100%;
		z-index: 10;
	}
	.overlayimg{
		position: absolute;
		z-index: 11;
		left:50px;
		top:30px;
		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>