JS放大镜的制作

基本结构

代码语言：javascript复制

<div class="box" id="box">
        <div class="small">
            <img src="small.jpg" width="350">
            <div class="mask"></div>
        </div>
        <div class="big">
            <img src="big.jpg" width="800">
        </div>
    </div>

基本样式

代码语言：javascript复制

*{padding:0;margin:0;}
        .box{
            width: 350px;
            height: 350px;
            margin:100px;
            border:1px solid #ccc;
            position: relative;
        }
        .big{

            width: 400px;
            height: 400px;
            position: absolute;
            top:0;
            left:360px;
            border:1px solid #ccc;
            overflow: hidden;
            display: none;
        }
        .big img{
            position: absolute;
        }
        .mask{
            width: 175px;
            height: 175px;
            background: rgba(255,255,0,.4);
            position: absolute;
            top:0px;
            left:0px;
            cursor: move;
            display: none;
        }
        .small{
            position: relative;
        }

我们大概过程分为三步

1.鼠标经过时显示mask和big,当鼠标离开box的时候隐藏mask和big

2.当鼠标在盒子中移动时，让mask跟着鼠标一起移动

3.当mask移动时让大图跟着移动 **鼠标经过时显示mask和big,当鼠标离开box的时候隐藏mask和big **

代码语言：javascript复制

var box = document.getElementById('box');
var small = document.querySelector('.small');
var big = document.querySelector('.big');
var mask = document.querySelector('.mask');

var smallImg = small.children[0];
var bigImg = big.children[0];

//.鼠标经过时显示mask和big,当鼠标离开box的时候隐藏mask和big
box.onmouseenter=function(){
    mask.style.display = 'block';
    big.style.display = 'block';
}
box.onmouseleave=function(){
    mask.style.display = 'none';
    big.style.display = 'none';
}

当鼠标在盒子中移动时，让mask跟着鼠标一起移动

代码语言：javascript复制

...
//2.当鼠标在盒子中移动时，让mask跟着鼠标一起移动
box.onmousemove=function(e){
    //1. 获取鼠标在盒子的位置 就是mask的坐标
    //鼠标在页面的位置减去盒子在页面的位置
    var maskX = e.pageX-box.offsetLeft;
    var maskY = e.pageY-box.offsetTop;
    //2. 让鼠标出现在mask的中心点
    maskX = maskX -mask.offsetWidth/2;
    maskY = maskY -mask.offsetHeight/2;
    //3. 限制mask的移动范围
    maskX = maskX<0?0:maskX;
    maskY = maskY<0?0:maskY;
    //如果maskX超过了最大值,使当前移动的位置就等于最大值
    maskX = maskX > box.offsetWidth-mask.offsetWidth?box.offsetWidth-mask.offsetWidth:maskX
    maskY= maskY > box.offsetHeight-mask.offsetHeight?box.offsetHeight-mask.offsetHeight:maskY
    //3. mask移动
    mask.style.left = maskX 'px';
    mask.style.top = maskY 'px';
}

当mask移动时让大图跟着移动

代码语言：javascript复制

...
//3. mask移动
mask.style.left = maskX 'px';
mask.style.top = maskY 'px';
//大图移动位置：
//mask移动的距离/mask最大移动的距离=大图片移动的距离/大图片移动的最大距离

//大图片移动的最大距离=大图片的宽度减去big盒子宽度
//mask移动的最大距离
var maskMax = box.offsetWidth - mask.offsetWidth;
//大图片移动的最大距离
var bigImgMax = bigImg.offsetWidth - big.offsetWidth
//大图片移动的距离
var bigImgX = maskX * bigImgMax / maskMax;
var bigImgY = maskY * bigImgMax / maskMax
//使图片往前走  
bigImg.style.left = -bigImgX 
'px';
bigImg.style.top = -bigImgY 'px'

到次完成放大镜的制作，这里主要是利用mask与大图移动的比值 mask移动的距离/mask最大移动的距离=大图片移动的距离/大图片移动的最大距离

mask

0 人点赞