模拟qq空间的照片点开显示

最新推荐文章于 2025-08-22 15:40:48 发布

原创最新推荐文章于 2025-08-22 15:40:48 发布 · 531 阅读

1 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种网页中实现图片放大查看的方法，包括创建背景板、图片板及关闭按钮等步骤，并通过JavaScript实现了点击背景板即可关闭放大的效果。

效果：

实现代码：

实现步骤：
1.设置背景板
2.设置图片板
3.设置图片，把图片放到图片板中
4.设置关闭按钮，并实现点击背景板即关闭的效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>qqT</title>
	<style type="text/css">
		.opci{
			background:#000;
				opacity:0.8;
				width:100%;
				height:100%;
				position:absolute;
				top:0px;
				left:0px;
				z-index:10;
		}
		.img{
			background:#fff;
			width:50%;
			height:50%;
			position:absolute;
			top:20%;
			left:20%;
			z-index:12;
		}
		.btn{
			width:100px;
			height:30px;
			background:yellow;
			color:#000;
		}
	</style>
</head>
<body>
	<img src="2.png" />
	<script type="text/javascript">
		var img = document.getElementsByTagName('img');
		img[0].onclick = function(){
			//大黑板
			var oDiv = document.createElement('div');					//向这个DIV中设置背景，设置层级，设置宽高
			oDiv.className = 'opci';
			oDiv.onclick = closeDiv;
			document.body.appendChild(oDiv);
			//图片板
			var imgDiv = document.createElement('div');
			imgDiv.className = 'img';
			document.body.appendChild(imgDiv);
			//图片
			var image = document.createElement('img');
			image.src = this.src;
			image.width = 680;
			image.height = 380;
			imgDiv.appendChild(image);
			//关闭按钮
			var btn = document.createElement('button');
			btn.className = 'btn';
			btn.innerHTML = '关闭';
			btn.onclick = closeDiv;
			imgDiv.appendChild(btn);		
					
		}
		
		function closeDiv()
		{
			var oDiv = document.getElementsByClassName('opci');
			var imgDiv = document.getElementsByClassName('img');
			document.body.removeChild(oDiv[0]);
			document.body.removeChild(imgDiv[0]);
		}
		
	</script>
</body>
</html>