首页 > 代码库 > 每天一个JavaScript实例-点击图片显示大图添加鼠标操作

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

2024-07-30 11:04:06   220人阅读

<!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 = http://www.mamicode.com/this.getAttribute("src");>
每天一个JavaScript实例-点击图片显示大图添加鼠标操作


联系
我们