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

最新推荐文章于 2021-06-04 05:43:14 发布

wxyoo1

最新推荐文章于 2021-06-04 05:43:14 发布

阅读量1.3k

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/waiting7436/article/details/40657303

版权

JS 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

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

wxyoo1

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每天一个JavaScript实例-点击图片显示大图添加鼠标操作

每天一个JavaScript实例-点击图片显示大图添加鼠标操作 img{padding:5px;width:100px;height:auto;} #outer{ width:100%; height:100%; } .overlay{ background-color:#000; opacity: .7; filter:alpha(opacity=70); po
复制链接

扫一扫