JS原生放大镜

最新推荐文章于 2022-08-17 20:41:50 发布

sinat_29454619

最新推荐文章于 2022-08-17 20:41:50 发布

阅读量431

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/sinat_29454619/article/details/73824096

版权

利用原生JS写一个放大镜

本文用于记录在学习写一个放大镜

放大镜的关键原理
鼠标在小图片上移动时，通过捕抓鼠标在小图片上的位置定位大图片的相应位置

做放大镜特效需要的元素
1.小图片
2.大图片
3.存放小图片和大图片的容器
4.一个放大镜

涉及的技术点

鼠标的移入移出鼠标移动3个事件

onmouseover
onmouseout
onmousemove

这里写图片描述

重点
1.如何让小图片的图片和大图片同时移动。坐标的计算。

这里写图片描述

主要计算的是一个比例

右边的放大部分相对于左边的放大镜来说，是一个固定的位置

图片中的ABCD都是按照相同的比例来放大的

左边放大镜的offsetleft为X，小盒子的offsetwidth为B

右边显示的部分额offsetwidth为C，整一个大盒子的offsetWidth为D

我们需要计算的就是大盒子中的图片的left值。

因为大盒子是小盒子的等比例放大

X/B-A=？/D-C

图片中的ABCD都是可以求到的

通过X/B-A求到left的系数

        var parX  = left/(smallbox.offsetWidth-fdj.offsetWidth);

同理得到top的

     var parY = top/(smallbox.offsetHeight-fdj.offsetHeight);

然后

 oimg.style.left=-parX*(oimg.offsetWidth-bigbox.offsetWidth)+'px';
 oimg.style.top=-parY*(oimg.offsetHeight-bigbox.offsetHeight)+'px';

注意这里的parx和Y是负数，因为要反方向的移动

整体代码

页面部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box">
        <div id="box1">
            <div id="float-box"></div>
            <img src="./macbook-small.jpg" alt="">
        </div>
        <div id="box2">
            <img src="./macbook-big.jpg" alt="">
        </div>
    </div>
</body>

</html>

css样式部分

    <style>
      *{padding: 0;margin: 0}
        #box{
            display: block;
            width: 400px;
            height: 255px;
            margin: 50px;
            position: relative;
            border: 1px solid #ccc;
        }
        #box1{position: relative;z-index: 1}
        #float-box{display: none;width: 160px;height: 120px;position: absolute;background: #ffffcc;border: 1px solid #ccc;opacity: 0.5;cursor: move}
        #box2{display: none;position: absolute;top: 0;left: 460px;width: 400px;height: 300px;overflow: hidden;border: 1px solid #ccc;z-index: 1}
        #box2 img{position: absolute;z-index: 5}
    </style>

JS实现部分

<script>
window.onload=function () {
    var oBox = document.getElementById('box');  //获取整体盒子
    var smallbox=document.getElementById('box1'); //获取左边小盒子
    var fdj = document.getElementById('float-box'); //左边的放大镜
    var bigbox = document.getElementById('box2');  //右边的盒子
    var oimg = bigbox.getElementsByTagName('img')[0]; //右边盒子中的图片

    smallbox.onmouseover=function () {  //鼠标移入事件
        fdj.style.display='block';
        bigbox.style.display='block';
    }
    smallbox.onmouseout=function () {  //鼠标移出事件
        fdj.style.display='none';
        bigbox.style.display='none';
    }
    smallbox.onmousemove=function (ev) {  //鼠标移动事件
        var ev = ev||event;  //兼容
        var left=ev.clientX-oBox.offsetLeft-smallbox.offsetLeft-fdj.offsetWidth/2;  //放大镜的left，/2是为了鼠标在放大镜的中间，美观
        var top=ev.clientY-oBox.offsetTop-smallbox.offsetTop-fdj.offsetHeight/2; //放大镜的top，/2是为了鼠标在放大镜的中间，美观
        if(left<0){ //判断left的值，不让放大镜超出小盒子
            left=0;
        }else if(left>(smallbox.offsetWidth-fdj.offsetWidth)){
            left=smallbox.offsetWidth-fdj.offsetWidth;
        }
        if(top<0){ //判断top的值，不让放大镜超出小盒子
            top=0;
        }else if(top>(smallbox.offsetHeight-fdj.offsetHeight)){
            top=smallbox.offsetHeight-fdj.offsetHeight;
        }
        var parX  = left/(smallbox.offsetWidth-fdj.offsetWidth);
        var parY = top/(smallbox.offsetHeight-fdj.offsetHeight);

        //改变放大镜和右边图片的left和top
        fdj.style.left=left+'px';
        fdj.style.top=top+'px';
        oimg.style.left=-parX*(oimg.offsetWidth-bigbox.offsetWidth)+'px';
        oimg.style.top=-parY*(oimg.offsetHeight-bigbox.offsetHeight)+'px';


    }

}

</script>

sinat_29454619

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JS原生放大镜

利用原生JS写一个放大镜本文用于记录在学习写一个放大镜放大镜的关键原理鼠标在小图片上移动时，通过捕抓鼠标在小图片上的位置定位大图片的相应位置做放大镜特效需要的元素 1.小图片 2.大图片 3.存放小图片和大图片的容器 4.一个放大镜涉及的技术点鼠标的移入移出鼠标移动3个事件onmouseover onmouseout onmousemove重点 1.如何让小图片的图片和大图片同时移
复制链接

扫一扫

JS原生放大镜

“相关推荐”对你有帮助么？