<style>
* {
margin: 0;
padding: 0;
}
.small {
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 50px;
position: relative;
}
.small img {
width: 100%;
}
.mark {
width: 100px;
height: 150px;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
left: 0;
top: 0;
/* display: none; */
}
.big {
width: 300px;
height: 450px;
overflow: hidden;
position: absolute;
left: 410px;
top: 0;
/* display: none; */
}
.big img {
width: 1200px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="small">
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.cGjCuP5ghtV5SuGhFWIqUAHaHa?rs=1&pid=ImgDetMain" alt="">
<!-- 蒙版 -->
<div class="mark"></div>
<!-- 大图 -->
<div class="big">
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.cGjCuP5ghtV5SuGhFWIqUAHaHa?rs=1&pid=ImgDetMain" alt="" class="bigImg">
</div>
</div>
<script>
// 获取元素
var small = document.getElementsByClassName("small")[0];
var mark = document.getElementsByClassName("mark")[0];
var big = document.getElementsByClassName("big")[0];
var bigImg = document.getElementsByClassName("bigImg")[0];
// 1.鼠标移入小图片,蒙版和放大图片显示
// small.onmouseenter = function(){
// mark.style.display = "block";
// big.style.display = "block";
// }
// // 2.鼠标移出,隐藏
// small.onmouseleave = function(){
// mark.style.display = "none";
// big.style.display = "none";
// }
// 3.鼠标移动时,蒙版跟着鼠标走
small.onmousemove = function (e) {
// console.log(e.offsetX);
// offsetX offsetY 有弊端,不能用
// console.log(e.clientX - small.offsetLeft - small.clientLeft);
var markX = e.pageX - small.offsetLeft - small.clientLeft - mark.offsetWidth / 2;
var markY = e.pageY - small.offsetTop - small.clientTop - mark.offsetHeight / 2;
// 规定蒙版移动范围
if (markX < 0) {
markX = 0;
}
if (markY < 0) {
markY = 0;
}
if (markX > small.clientWidth - mark.offsetWidth) {
markX = small.clientWidth - mark.offsetWidth
}
if (markY > small.clientHeight - mark.offsetHeight) {
markY = small.clientHeight - mark.offsetHeight
}
// 鼠标需要出现在蒙版中间
mark.style.left = markX + "px";
mark.style.top = markY + "px";
// 放大图片跟蒙版同步
// 计算比例
var ratio = big.clientWidth / mark.offsetWidth;
// 大图的偏移
var imgX = markX * ratio;
var imgY = markY * ratio;
bigImg.style.left = -imgX + "px";
bigImg.style.top = -imgY + "px";
}
</script>
</body>
放大镜效果的实现
最新推荐文章于 2024-10-27 11:25:22 发布