<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{
margin:0;
padding: 0;
}
#main{
width: 300px;
height: 300px;
margin:100px 0 0 50px;
position: relative;
}
#max{
width: 300px;
height: 300px;
overflow: hidden;
border:1px solid red;
position:absolute;
left:350px;
top:100px;
display: none;
}
#max img{
width: 600px;
height: 600px;
position: absolute;
top:0;
left:0;
}
#mark{
background-color: rgba(0,0,0,.5);
width: 150px;
height: 150px;
position: absolute;
left:0;
top:0;
display: none;
}
</style>
</head>
<body>
<div id="main">
<div id="mark"></div>
<img src="2.jpg" alt="">
</div>
<div id="max">
<img src="2.jpg" alt="">
</div>
<script>
var main = document.getElementById('main');
var mark = document.getElementById('mark');
var max = document.getElementById('max');
var maxImg = max.getElementsByTagName('img')[0];
// 设置放大倍数
var scaler = 2;
// 设置大图宽高
maxImg.style.width = main.clientWidth * scaler + 'px';
maxImg.style.height = main.clientHeight * scaler + 'px';
// 设置蒙层的宽高
mark.style.width = main.clientWidth / scaler + 'px';
mark.style.height = main.clientHeight / scaler + 'px';
// 鼠标在main div中移动时,不断获取鼠标的坐标,并相应的改变蒙层的位置
main.onmousemove = function(e){
// 显示出放大图片和蒙层
mark.style.display = 'block';
max.style.display = 'block';
var e = e || window.event;
// 通过clientX和clientY计算鼠标相对main div的坐标x和y
var x = e.clientX - main.offsetLeft - main.clientLeft - mark.clientWidth / 2;
var y = e.clientY - main.offsetTop - main.clientTop - mark.clientHeight / 2;
// 计算x和y的临界值
var maxX = main.clientWidth - mark.offsetWidth;
var maxY = main.clientHeight - mark.offsetHeight;
// 对x y的临界值进行判断
if(x >= maxX){
x = maxX;
}
if(x <= 0){
x = 0;
}
if(y >= maxY){
y = maxY;
}
if(y <= 0){
y = 0;
}
mark.style.left = x + 'px';
mark.style.top = y + 'px';
// 设置右边大图片的位置,实现相对移动
maxImg.style.left = -x * scaler + 'px';
maxImg.style.top = -y * scaler + 'px';
}
main.onmouseout = function(){
mark.style.display = 'none';
max.style.display = 'none';
}
</script>
</body>
</html>
js实现放大镜
最新推荐文章于 2023-03-19 16:40:41 发布