JS原生放大镜

来源：互联网发布：联通云计算公司编辑：程序博客网时间：2024/06/05 15:11

利用原生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>

阅读全文

0 0