网站的放大镜实例

亦凉 2022-05-16 13:45 179阅读 0赞

本文介绍一下电商网站用的比较多的案例,放大镜案例,先来看看效果吧.

![放大镜实例][70]

需求分析:
    当鼠标移入进小盒子的时候即左边的盒子,显示出遮罩层还有大盒子,大盒子会出现遮罩层遮挡的部分,达成一个放大的效果
    当鼠标在小盒子里移动时,大盒子里显示的图片对应的会跟着改变.
    
    那我们该如何实现这个效果呢?
    其实呢,这个案例就是对js事件,还有一些offset家族还有事件对象的三大坐标系(screen,client,page)的应用.
    了解过这些知识的,会很容易理解本文的代码,那么我将带来原生JS还有jQuery的实现方式,两者实现方式都差不多,
    仅供参考...下面给出代码然后在下面分析.

页面代码:

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style> * { margin: 0; padding: 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; } .mask { width: 175px; height: 175px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0; left: 0; cursor: move; display: none; } .small { position: relative; } .box img { vertical-align: top; } #bigBox > img { /*是让里面的图片脱标，为的就是让里面的图片进行一个移动*/ position: absolute; } </style>
    
    </head>
    <body>
    <div class="box" id="box">
        <div class="small" id="smallBox">
            <img src="images/001.jpg" width="350" alt=""/>
    
            <div class="mask" id="mask"></div>
        </div>
        <div class="big" id="bigBox">
            <img id="bigImg" src="images/0001.jpg" width="800" alt=""/>
        </div>
    </div>
    
    </body>

原生js代码:

首先,我们先获得我们需要操作的元素,整一个盒子(装着大盒子和小盒子),大盒子,小盒子,大图片,遮罩层.
    给我们整一个盒子注册一个移入事件和移出事件,控制遮罩层和大盒子的显示与隐藏
    紧接着我们小盒子注册一个移动事件.
    我们用一个封装好的函数(仅用于处理兼容性)来获取鼠标距离document的距离,接着用这个值减去整个盒子距离
    document的坐标,这样就可以获取到鼠标距离我这个小盒子左上角的x,y坐标.
    因为最后我们要将x,y赋予遮罩层的left和top值
    要让我们这个鼠标坐标在遮罩层居中,那么我们需要用刚获取的x,y坐标减去遮罩层一半的宽度和一半的高度.
    这样我们就可以发现鼠标一直在遮罩层的中心了,那么这时会出现一个问题,就是遮罩层会出界,那么,为了让他不出界
    我们需要做一个简单的边界检测了,如果我们的遮罩层left超过了小盒子的宽度的一半或者left小于0
    那么就会出现出界的情况,所以我们只要做个判断,在他出界的时候做好处理即可.
    最后一波,因为遮罩层移动的时候,大盒子的图片会跟着移动,那么我们很容易就想到,我们只需要在移动遮罩层的时候,
    让大盒子里的大图片跟着移动就可以了,记得算好大盒子与遮罩层的倍数.
    
    下面给出jQuery的代码

这里可以使一下jQuery的position属性,可以更方便的获取到遮罩层距离小盒子的定位距离,这里就不过多赘述了.

[70]: /images/20220516/f61cb65ba0364e05ac7f13f4af5da7cb.png