图片弹出放大


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片弹窗</title>
    <style>
		/* 触发弹窗图片的样式 */
		#myImg {
		    display: block;
		    margin: auto;
		    border-radius: 5px;
		    /* 光标位于图片的时候，展示形式是个小手 */
		    cursor: pointer;
		    transition: 0.3s;
		}
		/* img的hover效果，可以设置透明度 */
		#myImg:hover {
		    opacity: 0.85;
		    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
		}
		/* 弹窗背景 */
		.modal {
		    display: none;
		    /* 设置位置，不随屏幕移动而移动 */
		    position: fixed;
		    z-index: 1;
		    padding-top: 100px;
		    left: 0;
		    top: 0;
		    width: 100%;
		    height: 100%;
		    overflow: auto;
		    background-color: rgba(0, 0, 0, 0.5);
		}
		/* 图片 */
		.modal-content {
		    border-radius: 10px;
		    margin: auto;
		    display: block;
		    width: 80%;
		    max-width: 700px;
		}
		/* 文本内容 */
		#caption {
		    margin: auto;
		    display: block;
		    width: 80%;
		    max-width: 700px;
		    text-align: center;
		    color: #aaa;
		    padding: 10px 0;
		    height: 150px;
		    font-size: 1.4rem;
		}
		/* 添加动画 */
		.modal-content,
		#caption {
		    /* 设置动画名 */
		    -webkit-animation-name: zoom;
		    -webkit-animation-duration: 0.6s;
		    animation-name: zoom;
		    animation-duration: 0.6s;
		}
		/* 设置动画效果 */
		@-webkit-keyframes zoom {
		    from {
		        -webkit-transform: scale(0)
		    }
		    to {
		        -webkit-transform: scale(1)
		    }
		}
		@keyframes zoom {
		    from {
		        transform: scale(0)
		    }
		    to {
		        transform: scale(1)
		    }
		}
		/* 关闭按钮 */
		.close {
		    position: absolute;
		    top: 15px;
		    right: 35px;
		    color: #f1f1f1;
		    font-size: 40px;
		    /* 加粗字体 */
		    font-weight: bold;
		    transition: 0.3s;
		}
		.close:hover,
		.close:focus {
		    color: #bbb;
		    text-decoration: none;
		    cursor: pointer;
		}
		/* 小屏幕中图片宽度为 100%，响应式布局 */
		@media only screen and (max-width: 700px) {
		    .modal-content {
		        width: 100%;
		    }
		}
	</style>
</head>
<body>
    <!-- 触发弹窗 - 图片为本地的的图片地址 -->
    <img id="myImg" src="img.jpg" alt="炸裂得分王-詹姆斯.哈登" width="300" height="200">

    <!-- 弹窗 -->
    <div id="myModal" class="modal">

        <!-- 关闭按钮,&times这个是叉号 -->
        <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

        <!-- 弹窗内容 -->
        <img class="modal-content" id="img01">

        <!-- 文本描述 -->
        <div id="caption"></div>
    </div>

    <script>
		
		// 获取弹窗
		var modal = document.getElementById('myModal');
		
		// 获取图片插入到弹窗 ，使用 "alt" 属性作为文本部分的内容
		var img = document.getElementById('myImg');
		var modalImg = document.getElementById("img01");
		var captionText = document.getElementById("caption");
		img.onclick = function() {
		    modal.style.display = "block";
		    modalImg.src = this.src;
		    captionText.innerHTML = this.alt;
		}
		
		// 获取 <span>标签里面的元素，也就是那个叉号，设置关闭按钮，数组形式的元素，第一个就是[0]
		var span = document.getElementsByClassName("close")[0];
		
		// 当点击叉号的时候, 关闭弹窗
		span.onclick = function() {
		    modal.style.display = "none";
		}
		

	</script>
</body>

</html>
猜你喜欢
