淘宝放大镜的两种实现方法JS
栏目: JavaScript · 发布时间: 5年前
内容简介：这个，当你的鼠标移动到左边的主图上时，右边会出现一个放大的图，暂且就把这个叫做放大镜吧。这明显是不足够的！
啥是淘宝放大镜
这个，当你的鼠标移动到左边的主图上时，右边会出现一个放大的图，暂且就把这个叫做放大镜吧。
大概的做法
- 第一种，左边一个小图，右边一个原图，当鼠标在小图上移动的时候，通过更改left和top的值来实现同步移动（原图的position属性设置为absolute）
- 第二种，鼠标在小图上移动的时候，通过改变原图的background-position的值来同步移动。
关键操作
- 第一步，获取鼠标在小图上的位置，并且定位好跟随鼠标的方块（你应该知道是哪个方块吧。。）的位置。
//e.offsetX ,offsetY是鼠标的位置
//方块的left top在你的鼠标的左上方（网页左上角是原点），因此是减去一个方块的一半。
var x = e.offsetX - 方块.offsetWidth / 2;
var y = e.offsetY - 方块.offsetHeight / 2;
方块.style.left = x + 'px';
方块.style.top = y + 'px';
这明显是不足够的！
还需要考虑极端位置/情况
如果只用上面的设置，那么当你的鼠标移动到图片边缘的时候，方块有一半会出现在图片外。
正确的应该是 当你的方块触碰到边缘的时候，你的方块就不能在移动了， 尽管你的鼠标还在往下图中“鼠标的有效活动区域”外移动。
那么得加点代码
if (x < 0) {
x = 0;
}
if (y < 0) {
y = 0;
}
if (x > 小图.offsetWidth - 方块.offsetWidth) {
x = 小图.offsetWidth - 方块.offsetWidth;
}
if (y > 小图.offsetHeight - 方块.offsetHeight) {
y = 小图.offsetHeight - 方块.offsetHeight;
}
- 第二步，控制大图里的left - top或者background-position
//第一种方法：需要注意的是这里的left 和 top得反过来，你鼠标在小图上往下移的时候，对应的大图其实是往上移的。
//所以：大图上的left = -小图上的left * 他们的缩放倍率
大图.style.display = "block";
大图.style.left = -x * 大图.offsetWidth / 小图.offsetWidth + 'px';
大图.style.top = -y * 大图.offsetHeight / 小图.offsetHeight + 'px';
//第二种方法，这里需要注意 backgroundPosition的值是从0 - 100%的（得用百分比表示）；
//需要注意的是何时为百分百，从上面的极端情况判定我们可以知道
//x 是从0 到 mask.offsetWidth - rect.offsetWidth；
//因此这就是0 - 100%；y同理
大图.style.display = "block";
大图.style.backgroundPosition =`${x/(mask.offsetWidth - rect.offsetWidth)*100}% ${y/(mask.offsetHeight- rect.offsetHeight)*100}%`;
注意事项
- 我们上面说在小图img上绑定mousemove事件来定位方块，其实实际操作上，我们不能直接用img来绑定，而是得用一个和img一样大小遮罩层来绑定，不然在你鼠标移动的时候，图片会 疯狂闪烁 ， 疯狂！crazy！
- 还有 就是函数节流，这个想节流就节流吧。
- 还有个很重要的，就是 右边那个显示大图的div的大小 ，一定得是 小图上的方块大小 * 缩放倍率 的大小，如果过大，则会多出空白，过小，显示不完全。下面有代码，你可以带回家 疯狂测试 。
再详细一点
我知道我可能说的不是很详细，所以。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tb放大镜</title>
<style>
.small-box {
position: relative;
height: 300px;
}
.small-pic {
width: auto;
height: 300px;
}
.mask {
width: 526px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 100%;
cursor: crosshair;
}
.rect {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
opacity: .5;
background-color: red;
z-index: 0;
}
.big-box {
display: inline-block;
position: relative;
width: 266px;
height:266px;
border: 1px solid red;
overflow: hidden;
}
.big-pic {
position: absolute;
width: 1400px;
height: 798px;
top: 0;
left: 0;
}
.big-pic2{
display: inline-block;
width: 266px;
height:266px;
background-size: auto 798px;
background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550846791000&di=15edaf7bce643e13b65f70c82d74de30&imgtype=0&src=http%3A%2F%2Fpic.92to.com%2F360%2F201604%2F08%2F19864861_13.jpg");
background-position: 0 0;
}
</style>
</head>
<body>
<div class="small-box">
<img class="small-pic"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550846791000&di=15edaf7bce643e13b65f70c82d74de30&imgtype=0&src=http%3A%2F%2Fpic.92to.com%2F360%2F201604%2F08%2F19864861_13.jpg"
alt="">
<div class="mask"></div>
<div class="rect" style="display: none"></div>
</div>
<div class="big-box">
<img class="big-pic"
style="display: none"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550846791000&di=15edaf7bce643e13b65f70c82d74de30&imgtype=0&src=http%3A%2F%2Fpic.92to.com%2F360%2F201604%2F08%2F19864861_13.jpg"
alt="">
</div>
<div class="big-box">
<div class="big-pic2"></div>
</div>
</body>
<script>
window.onload = function () {
var mask = document.getElementsByClassName('mask')[0];
//为什么要用mask呢？不直接用选中small-pic。
//如果直接选择图片标签来绑定下面的mouseover事件，图片会一直闪烁！所以我们得给他一个和图片一样大小的遮罩层
var rect = document.getElementsByClassName('rect')[0];
var bPic = document.getElementsByClassName("big-pic")[0];
var bPic2 = document.getElementsByClassName("big-pic2")[0];
mask.addEventListener('mousemove', throttle(magnifier,100))
function magnifier(e){
//方块的left top在你的鼠标的左上方（网页左上角是原点），因此是减去一个方块的一半。
var x = e.offsetX - rect.offsetWidth / 2;
var y = e.offsetY - rect.offsetHeight / 2;
//极端情况,也就是当你的鼠标上的方块到四个边的边缘的时候。
if (x < 0) {
x = 0;
}
if (y < 0) {
y = 0;
}
if (x > mask.offsetWidth - rect.offsetWidth) {
x = mask.offsetWidth - rect.offsetWidth;
}
if (y > mask.offsetHeight - rect.offsetHeight) {
y = mask.offsetHeight - rect.offsetHeight;
}
//方块定位
rect.style.display="block";
rect.style.left = x + 'px';
rect.style.top = y + 'px';
//第一种方法：需要注意的是这里的left 和 top得反过来，你鼠标在小图上往下移的时候，对应的大图其实是往上移的。
//所以：大图上的left = -小图上的left * 他们的缩放倍率
bPic.style.display = "block";
bPic.style.left = -x * bPic.offsetWidth / mask.offsetWidth + 'px';
bPic.style.top = -y * bPic.offsetHeight / mask.offsetHeight + 'px';
//第二种方法，这里需要注意 backgroundPosition的值是从0 - 100%的（得用百分比表示）；
//需要注意的是何时为百分百，从上面的极端情况判定我们可以知道
//x 是从0 到 mask.offsetWidth - rect.offsetWidth；
//因此这就是0 - 100%；y同理
bPic2.style.display = "block";
bPic2.style.backgroundPosition =`${x/(mask.offsetWidth - rect.offsetWidth)*100}% ${y/(mask.offsetHeight- rect.offsetHeight)*100}%`;
}
mask.addEventListener('mouseout',function(){
rect.style.display = "none";
bPic.style.display = "none";
bPic2.style.display = "none";
})
//函数节流
function throttle(fn, delay) {
var pre = new Date().getTime();
return function () {
var context = this;
var args = arguments;
var now = new Date().getTime();
if (now - pre > delay) {
fn.apply(this,arguments);
}
}
}
}
</script>
</html>
后语
有错误的地方请指出，谢谢啦
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- jquery实现放大镜简洁代码
- jQuery：案例11 放大镜效果
- javascript – 你是如何把放大镜和“搜索”放在stackoverflow的搜索框中的？
- 让 Vuepress 支持图片放大功能
- 随机放大的不规则瀑布流
- 为BlueLake主题增加图片放大效果
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Learn Python the Hard Way
Zed A. Shaw / Addison-Wesley Professional / 2013-10-11 / USD 39.99
Master Python and become a programmer-even if you never thought you could! This breakthrough book and CD can help practically anyone get started in programming. It's called "The Hard Way," but it's re......一起来看看 《Learn Python the Hard Way》 这本书的介绍吧!
