开源达人html + css + js 图片弹窗白话原理解析

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
		/* 
		 弹窗大框css 请注意写法。
		 position: fixed;  这个很重要,有了它。弹窗就会全屏。
		 background-color: rgb(0, 0, 0); 背景色的过渡效果,请注意。
		 */
			#myimg {

				width: 20%;
				height: 20%;
				opacity: 1.0;
				filter: alpha(opacity=100);
			}

			#myimg:hover {
				opacity: 0.4;
				filter: alpha(opacity=40);
				/* 适用 IE8 及其更早版本 */
			}

			#tc {
				display: none;
				/* Hidden by default */
				position: fixed;
				/* Stay in place */
				z-index: 1;
				/* Sit on top */
				padding-top: 100px;
				/* Location of the box */
				left: 0;
				top: 0;
				width: 100%;
				/* Full width */
				height: 100%;
				/* Full height */
				overflow: auto;
				/* Enable scroll if needed */
				background-color: rgb(0, 0, 0);
				/* Fallback color */
				background-color: rgba(0, 0, 0, 0.9);
				/* Black w/ opacity */
			
			}

			span {
				float: right;
				color: #FFFFFF;
			}
			
			span:hover {
				background-color: #BBBBBB;
			}
			
			#dtimg {
				
				width: 50%;
				height: 50%;
			}
			
			#tc {
				margin: auto;
				text-align: center;
			}
			#ms {
				color: #FFFFFF;
			}
			
			
		</style>

		<img id="myimg" class="cmyimg" src="https://c.runoob.com/wp-content/uploads/2017/01/btotbhpudiagtmvlkyrs.jpg"
			alt="图片图片图片图片图片图片" />

		<div id="tc">
			<span>关闭</span>
			<div id="dt">
				<img id="dtimg" />
			</div>
			<div id="ms">
				
			</div>
		</div>

		<script>
			/* 1,点图弹出 #tc div
		   2,点关闭 关闭这个 div  全屏
		   3,要注意,html img中,设置 图片的src 可以直接这样写。 dtimg.src = this.src;
   
		*/

			var myimg = document.getElementById('myimg');
			var tc = document.getElementById('tc');
			var dtimg = document.getElementById('dtimg');
			var gb = document.getElementsByTagName('span');
			var ms = document.getElementById('ms');

			myimg.onclick = function() {
				tc.style.display = 'block';
				dtimg.src = this.src;
				dtimg.alt = this.alt;
				ms.innerHTML = this.alt;
			}
			gb.onclick=function (){
				tc.style.display = 'none';
			}
			
			
			
		</script>
	</body>
</html>

发表评论