今天来写常见的放大镜功能，这是各个电商网站经常使用的东西
样式
<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>
**注意:**这里是两张一样的图片，只是大小不同。还有要注意的是想要能够移动的部分一定要加定位这样才能移动。
js部分
1.首先要拿到要用的元素
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]
- 鼠标经过的时候 显示 mask和bigBox ， 当鼠标离开box的时候隐藏mask和bigBox
box.addEventListener('mouseenter', function () {
mask.style.display = 'block'
big.style.display = 'block'
})
box.addEventListener('mouseleave', function () {
mask.style.display = 'none'
big.style.display = 'none'
})
这样遮罩层和右边大图就会随着鼠标一起出现消失了。
3.mask(小图遮罩层)跟着鼠标走
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.大图跟着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全部代码
<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>