首页 > 代码库 > 每天一个JavaScript实例-点击图片显示大图

每天一个JavaScript实例-点击图片显示大图

2024-07-29 13:28:25   216人阅读

<!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 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实例-点击图片显示大图


联系
我们