仿京东产品放大镜效果---js基础

最新推荐文章于 2023-03-17 16:08:15 发布

qiaokelizhuzhu

最新推荐文章于 2023-03-17 16:08:15 发布

阅读量296

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qiaokelizhuzhu/article/details/124138949

版权

仿京东产品放大镜效果的分析思路

####主要练习元素偏移量 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);