Today, I will write about the common magnifying glass function, which is a style often used by various e-commerce websites
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.big img {
position: absolute;
width: 800px;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
.small {
position: relative;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="small">
<img src="images/small.jpg" width="350" alt="" />
<div class="mask"></div>
</div>
<div class="big">
<img src="images/big.jpg" alt="" />
</div>
</div>
</body>
**Note:** Here are two identical pictures, but they are of different sizes. Also note that the part that you want to be able to move must be positioned so that it can be moved.
js part
1. First get the elements you want to use
var mask = document.querySelector('.mask')
var big = document.querySelector('.big')
var small = document.querySelector('.small')
var box = document.getElementById('box')
var bigImg = big.getElementsByTagName('img')[0]
- The mask and bigBox are displayed when the mouse passes by, and the mask and bigBox are hidden when the mouse leaves the box
box.addEventListener('mouseenter', function () {
mask.style.display = 'block'
big.style.display = 'block'
})
box.addEventListener('mouseleave', function () {
mask.style.display = 'none'
big.style.display = 'none'
})
In this way, the mask layer and the large image on the right will appear and disappear with the mouse.
3.mask (small image mask layer) follow the mouse
box.addEventListener('mousemove', function (e) {
// 计算鼠标在盒子里的距离
var x = e.pageX - this.offsetLeft
var y = e.pageY - this.offsetTop
// mask移动的距离，除2是为了让鼠标在mask中心
var maskX = x - mask.offsetWidth / 2
var maskY = y - mask.offsetHeight / 2
//限制mask范围不让超出小图范围
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= small.offsetWidth - mask.offsetWidth) {
//mask在盒子里的移动距离
maskX = small.offsetWidth - mask.offsetWidth
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= small.offsetHeight - mask.offsetHeight) {
//mask在盒子里的移动距离
maskY = small.offsetHeight - mask.offsetHeight
}
mask.style.left = maskX + 'px'
mask.style.top = maskY + 'px'
4. The big picture follows the mask
// 3 当mask移动的时候，让大图片移动
// 求 大图片移动的距离
// 大图片移动的距离 = mask移动的距离 * 大图片最大能够移动的距离/ mask最大能够移动的距离
var bigMaxX = bigImg.offsetWidth - big.offsetWidth
var bigMaxY = bigImg.offsetHeight - big.offsetHeight
var bigX = maskX * bigMaxX / (small.offsetWidth - mask.offsetWidth)
var bigY = maskY * bigMaxY / (small.offsetHeight - mask.offsetHeight)
bigImg.style.left = -bigX + 'px'
bigImg.style.top = -bigY + 'px'
js all code
<script>
var mask = document.querySelector('.mask')
var big = document.querySelector('.big')
var small = document.querySelector('.small')
var box = document.getElementById('box')
var bigImg = big.getElementsByTagName('img')[0]
// 1 鼠标经过的时候 显示 mask和bigBox ， 当鼠标离开box的时候隐藏mask和bigBox
// mouseenter mouseleave 不会触发事件冒泡
// mouseover mouseout 会触发事件冒泡
box.addEventListener('mouseenter', function () {
mask.style.display = 'block'
big.style.display = 'block'
})
box.addEventListener('mouseleave', function () {
mask.style.display = 'none'
big.style.display = 'none'
})
// mask跟着鼠标走
box.addEventListener('mousemove', function (e) {
// 计算鼠标在盒子里的距离
var x = e.pageX - this.offsetLeft
var y = e.pageY - this.offsetTop
// mask移动的距离
var maskX = x - mask.offsetWidth / 2
var maskY = y - mask.offsetHeight / 2
//限制mask范围
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= small.offsetWidth - mask.offsetWidth) {
//mask在盒子里的移动距离
maskX = small.offsetWidth - mask.offsetWidth
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= small.offsetHeight - mask.offsetHeight) {
//mask在盒子里的移动距离
maskY = small.offsetHeight - mask.offsetHeight
}
mask.style.left = maskX + 'px'
mask.style.top = maskY + 'px'
// 3 当mask移动的时候，让大图片移动
// 求 大图片移动的距离
// 大图片移动的距离 = mask移动的距离 * 大图片最大能够移动的距离/ mask最大能够移动的距离
var bigMaxX = bigImg.offsetWidth - big.offsetWidth
var bigMaxY = bigImg.offsetHeight - big.offsetHeight
var bigX = maskX * bigMaxX / (small.offsetWidth - mask.offsetWidth)
var bigY = maskY * bigMaxY / (small.offsetHeight - mask.offsetHeight)
bigImg.style.left = -bigX + 'px'
bigImg.style.top = -bigY + 'px'
})
</script>