介绍与原理
图片点击放大为点击图片时，页面弹出该图片的大图。这样可以在布局时使用缩略图，而当用户需要查看大图时在点击图片来查看原图(大图)，这样也能一定程度上起到节约流量和的作用。
图片点击放大的原理为设置一个一般情况下消失的遮罩层，当图片点解事件触发时，显示该遮罩层，并在遮罩层中显示原图片。
实现
设置一个默认消失的遮罩层。<img> 标签的 src 属性为缩略图的路径，data-src 属性为原图(大图)的路径。即页面中的图片默认加载缩略图，遮罩层中用于展示的图片的路径从 <img> 标签的 data-src 属性获取。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bigIMage</title>
<style>
.myImg {
width: auto;
max-width: 310px;
cursor: pointer;
transition: 0.3s;
display: block;
margin-bottom: 10px;
}
.myImg:hover {
opacity: 0.8;
}
#myModal {
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.9);
}
.modal-content {
margin: auto;
display: block;
width: auto;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 12px 0;
height: 150px;
}
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@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;
}
</style>
</head>
<body>
<div id="imgBox">
<img class="myImg" src='s-image0.jpg' data-src="image0.jpg" alt="图片一" title="图片一" />
<img class="myImg" src='s-image1.jpg' data-src="image1.jpg" alt="图片二" title="图片二" />
<img class="myImg" src='s-image2.jpg' data-src="image2.jpg" alt="图片三" title="图片三" />
<img class="myImg" src='s-image3.jpg' data-src="image3.jpg" alt="图片四" title="图片四" />
</div>
<div id="myModal">
<span class="close">×</span>
<img class="modal-content" id="imgModal">
<div id="caption"></div>
</div>
<script>
let modal = document.getElementById('myModal');
let captionText = document.getElementById('caption');
let bigImg = document.getElementById('imgModal');
let imgList = document.getElementsByClassName('myImg');
let imgBox = document.getElementById('imgBox');
imgBox.addEventListener('click', function(e) {
var e = e || window.e;
modal.style.display = 'block';
bigImg.src = e.target.getAttribute('data-src');
captionText.innerText = e.target.getAttribute('alt');
e.stopPropagation();
}, false);
modal.addEventListener('click', function(e) {
var e = e || window.e;
modal.style.display = 'none';
e.stopPropagation();
}, false);
</script>
</body>
</html>
本例中通过事件冒泡将图片的 click 事件冒泡给其父级元素进行处理，通过 e 来获取被点击元素并将其原图(大图)的路径(data-src)赋予遮罩层中用于展示的 <img> 。对关闭也通过事件冒泡，使当遮罩层的任何一部分被点击时遮罩层消失。
接着，可以更进一步--为遮罩层添加 < > 来使得可以在大图模式下点击来切换查看原图(大图)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bigIMageList</title>
<style>
.myImg {
width: auto;
max-width: 310px;
cursor: pointer;
transition: 0.3s;
display: block;
margin-bottom: 10px;
}
.myImg:hover {
opacity: 0.8;
}
#myModal {
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.9);
}
.modal-content {
margin: auto;
display: block;
width: auto;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 12px 0;
height: 150px;
}
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
#prev,
#next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
#next {
right: 0;
border-radius: 3px 0 0 3px;
}
#prev:hover,
#next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.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;
}
</style>
</head>
<body>
<div id="imgBox">
<img class="myImg" src='s-image0.jpg' data-src="image0.jpg" alt="图片一" title="图片一" data-index="0" />
<img class="myImg" src='s-image1.jpg' data-src="image1.jpg" alt="图片二" title="图片二" data-index="1" />
<img class="myImg" src='s-image2.jpg' data-src="image2.jpg" alt="图片三" title="图片三" data-index="2" />
<img class="myImg" src='s-image3.jpg' data-src="image3.jpg" alt="图片四" title="图片四" data-index="3" />
</div>
<div id="myModal">
<span class="close">×</span>
<img class="modal-content" id="imgModal">
<a id="prev">❮</a>
<a id="next">❯</a>
<div id="caption"></div>
</div>
<script>
let modal = document.getElementById('myModal');
let captionText = document.getElementById('caption');
let bigImg = document.getElementById('imgModal');
let imgList = document.getElementsByClassName('myImg');
let imgBox = document.getElementById('imgBox');
let prev = document.getElementById('prev');
let next = document.getElementById('next');
let len = imgList.length;
let num = -1;
prev.addEventListener('click', function(e) {
var e = e || window.e;
num -= 1;
if(num <= -1) {
num = len - 1;
} else {
}
bigImg.src = imgList[num].getAttribute('data-src');
e.stopPropagation();
});
next.addEventListener('click', function(e) {
var e = e || window.e;
num += 1;
if(num >= len) {
num = 0;
} else {
}
bigImg.src = imgList[num].getAttribute('data-src');
e.stopPropagation();
});
imgBox.addEventListener('click', function(e) {
var e = e || window.e;
console.log('click' + e.target.getAttribute('data-index'));
num = parseInt(e.target.getAttribute('data-index'));
modal.style.display = 'block';
bigImg.src = e.target.getAttribute('data-src');
captionText.innerText = e.target.getAttribute('alt');
e.stopPropagation();
});
modal.addEventListener('click', function(e) {
modal.style.display = 'none';
e.stopPropagation();
});
</script>
</body>
</html>
在 <img> 中添加 data-index 来标记被点击的图片的位数(用 num 来储存)，使得可以 < 和 > 的 click 事件可以判断前一副图片或后一副图片的位数(记得阻止这两个 click 事件的冒泡，因为其父元素 modal 绑定了点击消失的事件)。
网友评论