放大镜效果
摘要
利用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 = 0
middleBox.addEventListener('mouseenter', function () {
clearTimeout(timeId)
const mask = this.querySelector('.mask')
mask.style.display = 'inline-block'
bigBox.style.backgroundImage = middleBox.style.backgroundImage
bigBox.style.display = 'inline-block'
this.addEventListener('mousemove', function (e) {
// console.log(e.offsetX);
const x = e.pageX - this.getBoundingClientRect().left
const y = e.pageY - this.getBoundingClientRect().top
if (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;
}