淘宝放大镜代码实现
2019-04-07 本文已影响14人
alanwhy
什么是淘宝放大镜
如图
image.png
实现思路
- 左边一个小图，右边一个原图，当鼠标在小图上移动的时候，通过更改left和top的值来实现同步移动（原图的position属性设置为absolute）
- 鼠标在小图上移动的时候，通过改变原图的background-position的值来同步移动。
关键操作
1.获取鼠标在小图上的位置，并且定位好跟随鼠标的方块的位置。
还需要考虑极端位置/情况
image.png
正确的应该是 当你的方块触碰到边缘的时候，你的方块就不能在移动了，尽管你的鼠标还在往下图中“鼠标的有效活动区域”外移动。
image.png
2.控制大图里的left - top或者background-position
代码实现
// html
<!DOCTYPE html>
<html lang="en" id="h">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="file:///D:/SublimeText3/Data/mylive.js"></script>
<title></title>
</head>
<body>
<div class="a" id="a">
<img src="http://www.htdzzk.com.cn/upload_files/tk14691846.jpg" class="min" id="min">
<div class="a1" id="a1"></div>
<h5>节流调得有点慢, 所以卡 </h5>
</div>
<div class="b" id="b">
<img src="http://www.htdzzk.com.cn/upload_files/tk14691846.jpg" id="max">
</div>
</body>
</html>
// CSS
body {
height: 1500px;
}
.a {
border: 2px solid red;
width: 300px;
height: 300px;
position: relative;
float: left;
margin-right: 30px;
}
.min {
width: 100%;
height: 100%;
object-fit: cover;
}
.a1 {
width: 100px;
height: 100px;
background-color: #e4e465;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
top: 0;
left: 0;
cursor:move;
}
.b {
width: 450px;
height: 450px;
border: 2px solid blue;
float: left;
position: relative;
overflow: hidden;
display: none;
}
.b img {
width: 800px;
height: 800px;
object-fit: cover;
position: absolute;
}
h5 {
margin-top: 30px;
float: left;
clear: left;
}
// js
var a = document.getElementById("a");
var a1 = document.getElementById("a1");
var b = document.getElementById("b");
var max = document.getElementById("max");
var h = document.getElementById("h");
var min = document.getElementById("min");
a.onmouseenter = function(e) {
var e = e || window.event;
a1.style.display = "block";
b.style.display = "block";
var v =
(max.clientWidth - b.clientWidth) /
(min.clientWidth - a1.clientWidth);
var tx = a1.offsetWidth / 2;
var ty = a1.offsetHeight / 2;
var timer = null;
document.onmousemove = function(e) {
clearTimeout(timer);
timer = setTimeout(function(e) {
var e = e || window.event;
var pagex = e.clientX + h.scrollLeft;
var pagey = e.clientY + h.scrollTop;
var x = pagex - a.offsetLeft - a.clientLeft - tx;
var y = pagey - a.offsetTop - a.clientTop - ty;
if (x <= 0) {
x = 0;
} else if (x >= a.clientWidth - a1.offsetWidth) {
x = a.clientWidth - a1.offsetWidth;
}
if (y <= 0) {
y = 0;
} else if (y >= a.clientHeight - a1.offsetHeight) {
y = a.clientHeight - a1.offsetHeight;
}
a1.style.left = x + "px";
a1.style.top = y + "px";
max.style.left = -x * v + "px";
max.style.top = -y * v + "px";
window.getSelection
? window.getSelection().removeAllRanges()
: document.selection.empty();
}, 14, e);
};
};
a.onmouseleave = function() {
a.onmousemove = null;
a1.style.display = "none";
b.style.display = "none";
};
原文链接：淘宝放大镜的两种实现方法JS
