仿京东产品放大镜效果的分析思路
####主要练习元素偏移量 offset的系列
展示功能:
- 鼠标经过图片盒子( **命名:preview-img **),鼠标箭头下会出现一个小透明的盒子(命名:mask),和 一个显示大图盒子(命名:box)
- mask作为放大镜功能使用, 会跟随鼠标在preview-img内部移动;
- 鼠标在**preview-img 内部移动时,box 里的图片也会随着鼠标在preview-img **内部的移动而移动;
- 当鼠标称出preview-img,mask 和 box 也都消失不见;
要实现上述功能,拆解步骤
- 写html框架
<div class="preview-img">
<img src="images/banner1.jpg" alt="" class="min-img">
<div class="mask"></div>
<div class="box">
<img src="images/banner1.jpg" alt="" class="boxImg">
</div>
</div>
- 定义样式
.preview-img{position:relative;width:400px;height:400px;text-align:center;border:solid 1px #ccc;}.min-img{width:400px;height:400px;}.mask{display:none;position:absolute;top:0;left:0;width:300px;height:300px;background-color:rgba(0,0,0,.3);}.box{display:none;position:absolute;top:0;right:-510px;width:500px;height:500px;z-index:999;overflow:hidden;}.box img{position:absolute;top:0;left:0;width:800px;height:800px;}
- js代码
//获取元素
var preview = document.querySelector('.preview-img');
var mask = document.querySelector('.mask');
var box = document.querySelector('.box');
//鼠标经过大盒子,mask 、box 显示
function over() {
mask.style.display = 'block';
box.style.display = 'block';
};
preview.addEventListener('mouseover', over);
//鼠标离开大盒子,mask 、box 隐藏
function out() {
mask.style.display = 'none';
box.style.display = 'none';
};
preview.addEventListener('mouseout', out);
//获取鼠标在盒子里移动的实时坐标 赋值给mask层
//
function move(e) {
var x = e.pageX - preview.offsetLeft;
var y = e.pageY - preview.offsetTop;
var maskX = x - mask.offsetWidth / 2;
var masky = y - mask.offsetHeight / 2;
//如果 maskX 小于等0 就让它等于0 不让masky 超出preview 的左右边界
var maskMax = preview.offsetWidth - mask.offsetWidth;
if (maskX <= 0) {
maskX = 0
} else if (maskX >= maskMax) {
maskX = maskMax
}
//如果 masky 小于等0 就让它等于0,不让masky超出preview 的上下边界
if (masky <= 0) {
masky = 0
} else if (masky >= preview.offsetHeight - mask.offsetHeight) {
masky = preview.offsetHeight - mask.offsetHeight
}
//offset系列只能读取数值且没单位的,style可以修改数字
mask.style.left = maskX + 'px';
mask.style.top = masky + 'px';
//获取最大图片的元素
var boxImg = document.querySelector('.boxImg');
//大图片的移动距离
var bigMax = boxImg.offsetWidth - box.offsetWidth;
//大图的移动距离=mask移动距离*大图的最大移动距离 /遮挡层的最大移动距离
//大图片的移动距离 X Y
var bigX = maskX * bigMax / maskMax;
console.log(maskX);
var bigY = masky * bigMax / maskMax;
//style赋值给大图x上距和基左距的距离
boxImg.style.left = -bigX + 'px';
boxImg.style.top = bigY + 'px';
}
preview.addEventListener('mousemove', move);
ps:对我来说最难的点在于理解这个计算出大图移动距离 的公式
==大图的移动距离=mask移动距离*大图的最大移动距离 /遮挡层的最大移动距离 ==