放大镜效果
摘要
利用css和js来实现图片放大效果
HTML
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head><body><div class="middle"><div class="mask"></div></div><div class="smailContainer"><div class="smail"><img src="./images/img/1074928343.jpeg" alt="你干嘛"></div><div class="smail"><img src="./images/img/947922382.jpeg" alt="你干嘛"></div><div class="smail"><img src="./images/img/930354195.jpeg" alt="你干嘛"></div><div class="smail"><img src="./images/img/676723802.jpeg" alt="你干嘛"></div></div><div class="big"></div><script>const middleBox = document.querySelector('.middle')const smailBox = document.querySelector('.smailContainer')const bigBox = document.querySelector('.big')//滑动选择图片显示middleBox.style.backgroundImage = `url(${smailBox.querySelector('img').src})`smailBox.addEventListener('mouseover', function (e) {if (e.target.nodeName === 'IMG') {middleBox.style.backgroundImage = `url(${e.target.src})`;}})// mouseenter，mouseleave无冒泡//显示mask和大图let timeId = 0middleBox.addEventListener('mouseenter', function () {clearTimeout(timeId)const mask = this.querySelector('.mask')mask.style.display = 'inline-block'bigBox.style.backgroundImage = middleBox.style.backgroundImagebigBox.style.display = 'inline-block'this.addEventListener('mousemove', function (e) {// console.log(e.offsetX);const x = e.pageX - this.getBoundingClientRect().leftconst y = e.pageY - this.getBoundingClientRect().topif (x >= 0 && x <= 200 && y >= 0 && y <= 200) {let mx = 0;let my = 0;if (x <= 25) {mx = 0; } else if (x <= 175) { mx = x - 25 //平滑移动，mask的一半} else {mx = 150}if (y <= 25) {my = 0;} else if (y <= 175) {my = y - 25} else {my = 150}mask.style.marginLeft = mx + 'px';mask.style.marginTop = my + 'px';bigBox.style.backgroundPositionX = -4* mx + 'px' //4为大图和mask的倍数bigBox.style.backgroundPositionY = -4* my + 'px'}})})middleBox.addEventListener('mouseleave', function () {this.querySelector('.mask').style.display = 'none'timeId = setTimeout(function () {bigBox.style.display = 'none'}, 200)})//大图显示bigBox.addEventListener('mouseenter', function () {this.style.display = 'inline-block'clearTimeout(timeId)})bigBox.addEventListener('mouseleave', function () {timeId = setTimeout(function () {bigBox.style.display = 'none'}, 200)})</script>
</body></html>
CSS
.middle{width: 200px;height: 200px;background: green;display: inline-block;background-size: cover;
}
.big{width: 200px;height: 200px;margin-left: 5px;background: palegoldenrod;display: inline-block ;z-index: 99;position: absolute;display: none;/* background-size: cover; */
}.smailContainer {height: 200px;display: inline-block;position: absolute;margin-left: 5px;
}.smail {width: 40px;height: 40px;background: red;margin-top: 5px;
}.smail:hover {cursor: pointer;border: 2px solid #000;
}img {width: 100%;height: 100%;object-fit: cover;
}.mask{width: 50px;height: 50px;background: #0773d7;opacity: 0.3;display: none;z-index: 99;
}
