网页图片放大镜

最新推荐文章于 2023-07-29 16:19:42 发布

砂糖小刀j

最新推荐文章于 2023-07-29 16:19:42 发布

阅读量264

点赞数

分类专栏：小程序文章标签： css html js

本文链接：https://blog.csdn.net/jjabcde48/article/details/116944160

版权

小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

基本思路：大图片盒子包裹大图片，小图片盒子包裹小图片，遮盖层位于小图片盒子里，用鼠标的移动事件，让遮盖层跟随鼠标移动，移动遮盖层的同时让大图片跟着移动相应比例的距离，注意大图片移动的方向和遮盖层的方向相反，难点为获取相应距离

1.html代码

<body>
    <div class="container">
        <div class="smallbox">
            <img src="./images/small.jpg" class="smallimg">
            <div class="mask"></div>
        </div>
        <div class="bigbox">
            <img src="./images/big.jpg" class="bigimg">
        </div>
    </div>
</body>

2.css代码

*{
    margin: 0;
    padding: 0;
}
.container{
    width: 800px;
    height: 700px;
    margin: 50px auto;
    display: flex;//flex布局让两个盒子并排
}
.smallbox{
    width: 300px;
    height: 450px;
    border: 1px solid;
    position: relative;
}
.smallimg{
    width: 100%;
    height: 100%;
}
//遮盖层
.mask{
    width: 100px;//宽高为小图片的三分之一，这意味着大图片移动的比例也应该是三比一
    height: 150px;
    background-color: #bfa;
    position: absolute;
    opacity: .5;
    display: none;
}
.bigbox{
    width: 350px;
    height: 405px;
    overflow: hidden;//超出大图片盒子部分的图片隐藏（看起来就像放大镜了）
    display: block;
    position: relative;
    border: 1px solid;
} 
.bigimg{
    width: 870px;
    height: 1310px;
    position: absolute;
}

js代码

window.onload = function () {
  var smallBox = document.querySelector(".smallbox");
  var mask = document.querySelector(".mask");
  var bigBox = document.querySelector(".bigbox");
  var bigImg = document.querySelector(".bigimg");
  var container = document.querySelector(".container");
  //鼠标移入移出小盒子控制大盒子和遮盖层的显示与隐藏
  smallBox.onmouseover = function () {
    mask.style.display = "block";
    bigBox.style.display = "block";
  };
  smallBox.onmouseout = function () {
    mask.style.display = "none";
    bigBox.style.display = "none";
  };
  smallBox.onmousemove = function (e) {
    //求出鼠标在盒子中的坐标，公式：鼠标在页面的坐标-大盒子距离页面左侧的距离-遮盖层自身宽度的一半（鼠标在遮盖层中居中）
    var x = e.clientX - container.offsetLeft-mask.offsetWidth/2;
    var y = e.clientY - container.offsetTop-mask.offsetHeight/2;
    //求出遮盖层在小图片盒子中的最大移动距离，公式：小图片盒子的宽度-遮盖层的宽度
    var x_move =smallBox.offsetWidth-mask.offsetWidth
    var y_move =smallBox.offsetHeight-mask.offsetHeight
    //if判断来设置遮盖层不能跑到小图片盒子外面
    if(x>=x_move){
        x=x_move
    }else if(x<0){
        x=0
    }
    if(y>=y_move){
        y=y_move
    }else if(y<0){
        y=0
    }
    //设置遮盖层移动的距离
    mask.style.left = x  + "px";
    mask.style.top = y + "px";
    //设置大图片移动的距离
    bigImg.style.left=-3*x+"px"
    bigImg.style.top=-3*y+"px"
  }; 
};

看起来绕，但原理其实挺简单的，拿到相应移动距离以后进行赋值就行了

砂糖小刀j

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页图片放大镜

基本思路：大图片盒子包裹大图片，小图片盒子包裹小图片，遮盖层位于小图片盒子里，用鼠标的移动事件，让遮盖层跟随鼠标移动，移动遮盖层的同时让大图片跟着移动相应比例的距离，注意大图片移动的方向和遮盖层的方向相反，难点为获取相应距离1.html代码<body> <div class="container"> <div class="smallbox"> <img src="./images/small.jpg" class
复制链接

扫一扫