JS实战004:图片弹窗
1、 第一步：，还是先写出HTML基本代码，这里只用到了一张图片，弹出的图片还是原来的哪一张，这里我分别定义了两个div，small指缩小的时候的，magnify是点开之后的。
2、第二步：样式布局，最外面的div是用来定义small中的图片显示区域的，后面可以根据外部的其他div进行调整，这里small我用了display: flex;弹性布局，弹出显示也有个动画效果（从0到1的放大效果），这里close按钮用到的是绝对定位position: absolute;相对于magnify进行定位，而content则是position: fixed;相对于浏览器窗口进行定位。
3、 通过以上的 样式设置我们就可以得到如下的图案了，窗口中只能一张略缩的小图在浏览器窗口的中央位置，其他样式已经被隐藏起来了，这里我加了一个鼠标放上去半透明的效果，这样就知道浏览器已经响应了我们的设置了，同样我给small添加了一个z-index: 1;，为了方便magnify放在该元素之上作参考。
4、 第三步，实现交互效果，接下来我们要获取到要执行操作的DOM元素，然后在执行相应的点击事件即可实现我们前面的效果，这里我给small和magnify定义成id标签的目的就是为了方便我们对DOM元素的抓取，其他元素则通过他们的子元素形式进行获取。
5、这里用到两个赋值操作，一就是把略缩图中的图片传递给放大图中，magnifyImg.src = this.src;二是把后台中的alt属性传递给了span标签中，这样我们就不用单独提供图片的描述信息了,点击之后我们得到就是如下的图像了。
6、后面我想把弹出也添加到滑动轮播图中去，这样当我细看轮播中的信息时我就可以点击放大了，下面是图片弹窗的完整代码,有兴趣的可以试试：
7、<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS图片弹窗</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.popup {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#small {
width: 300px;
height: 200px;
border: 10px solid rgba(35, 36, 35, 0.6);
z-index: 1;
}
#small img {
width: 100%;
height: 100%;
cursor: pointer;
/* transition: 0.3s; */
}
#small img:hover {
opacity: 0.5;
}
#magnify {
display: none;
position: fixed;
z-index: 2;
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #ebe7e7;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover, .close:focus {
color: rgb(156, 153, 153);
text-decoration: none;
cursor: pointer;
}
.content {
margin: auto;
display: block;
max-width: 800px;
width: 80%;
}
.describe {
margin: auto;
display: block;
text-align: center;
color: #ccc;
padding: 20px 0;
}
.content, .describe {
-webkit-animation-name: Eject;
-webkit-animation-duration: 5s;
animation-name: Eject;
animation-duration: 5s;
}
@-webkit-keyframes Eject {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
@keyframes Eject {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
</style>
</head>
<body>
<div class="popup">
<div id="small">
<img id="img" src="../src/assets/images/1.png" alt="填写图片信息描述">
</div>
<div id="magnify">
<span class="close">×</span>
<img class="content">
<span class="describe"></span>
</div>
</div>
</body>
<script>
var magnify = document.getElementById('magnify');
var small = document.getElementById('small');
var img = small.children[0];
var close = magnify.children[0];
var magnifyImg = magnify.children[1];
var describe = magnify.children[2];
img.onclick = function () {
magnify.style.display = "block";
magnifyImg.src = this.src;
describe.innerHTML = this.alt;
}
close.onclick = function () {
magnify.style.display = "none";
}
</script>
</html>