要求
点击一张图片，图片就会放大，查看大图，点击空白处就会隐藏大图，回到缩略图。
技术要点
主要是Jquery进行元素的显示与隐藏。
代码
<!DOCTYPE html><html><head><title>qqq</title><meta charset="utf-8"><style type="text/css">*{margin:0;padding:0;}h1{text-align: center;margin:20px 0;}#imgdiv{width: 500px;margin:50px auto;}#imgdiv img{width: 300px;margin:0 100px;}#bigimg{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,.3);top: 0;display: none;}#bigimg img{width: 1000px;margin:auto;position: fixed;left:0;right:0;top: 80px;cursor: pointer;}</style></head><body><h1>图片预览 - 放大/缩小</h1><!-- 图片容器 --><div id="imgdiv" onclick="imgbig();"><img src="zsdfsaerg.jpg" id="imgsrc" /></div><!-- 放大遮罩层 --><div id="bigimg" onclick="closeimg();"></div></body><!-- JS --><script src="/jquery/jquery-3.3.1.js"></script><script>function imgbig() {var imgsrc = $('#imgsrc').attr('src');$("#bigimg").css("display","block");$("#bigimg").html("<img src="+imgsrc+" />");}function closeimg() {$("#bigimg").css("display","none");}</script></html>
demo
Author:TANKING
Date:-04-16
Web:
WeChat:face6009
