温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript怎么实现放大镜效果

发布时间:2021-10-27 11:08:30 来源:亿速云 阅读:113 作者:小新 栏目:开发技术

这篇文章主要介绍了JavaScript怎么实现放大镜效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

这次实现的效果如下:

JavaScript怎么实现放大镜效果

这次的案例稍微有一点难度,在css和js上都需要多加思考,话不多说,让我们来开始吧~

1、首先我们需要使用html和css规划好整体的布局,即两个相邻的盒子A和B,左边的盒子A中还有一个小盒子S。为了实现相邻,我采用的方法是为其均设置position:absolute ,然后设置lefttop的值来使其相邻
小盒子S我们同样可以为其设置position:absolute,调整一下背景颜色即可。

2、然后我们需要使用js来设置动画效果,即:鼠标放在盒子A上时,小盒子S的位置会随着鼠标的移动发生移动,同时盒子B中的图像会成为盒子S覆盖图像的放大版。如何实现呢?

3、首先实现小盒子S的位置变化:调用盒子A的onmousemove函数,传入参数client,表示时间鼠标在盒子A上移动。我们通过client获取鼠标的位置(clientX,clientY),然后通过(clientX-boxA.offsetLeft,clientY-boxA.offsetTop)可获得鼠标在图像上的相对坐标,通过此值减去盒子S的宽度、高度的一半即可获得盒子S在A中的位置。
但是要注意,记得为盒子S设置边界,当横坐标为0或为A盒子宽度、纵坐标为0或者A盒子高度时,要使其坐标固定。

4、接着实现盒子B中的图像会成为盒子S覆盖图像的放大版:我们首先来思考一个问题,这个放大效果如何才能实现呢? 从我的实现角度出发,对于盒子B来说,它首先需要一个背景图==盒子A中的图像,然后将其放大某个倍数x,当盒子S移动时,改变B的background-position为y,达到放大+移动的效果。

5、最后一点,x和y的值是多少呢?(假定S、A、B均为等比例) x:将盒子B放大的倍数应该等同于A的大小除以S的大小,这样能达到相同的图像范围。y:B移动时的距离变化应该示盒子S移动的距离*(盒子B的大小除以S的大小)。可以多加思考~

可能我的实现方法过程比较复杂,大家如果想到更好的方法可以留言呀

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            position: absolute;
            left: 180px;
            top: 100px;
        }

        #box img {
            width: 400px;
            height: 300px;
            border: 1px solid rgba(255, 255, 255, 0.7);
            vertical-align: bottom;
        }

        #nav {
            width: 480px;
            height: 360px;
            border: 1px solid rgba(255, 255, 255, 0.7);
            position: absolute;
            left: 582px;
            top: 100px;
            background-image: url(../img/morn.jpg);
            background-repeat: no-repeat;
            background-size: 250% 250%
        }

        #small {
            width: 160px;
            height: 120px;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="small"></div>
        <img src="../img/morn.jpg" alt="">
    </div>
    <div id="nav"></div>
    <script>
        let box = document.getElementById("box");
        let small = document.getElementById("small");
        let nav = document.getElementById("nav");

        box.onmousemove = function (client) {
            let x = client.clientX - box.offsetLeft;
            let y = client.clientY - box.offsetTop;
            small.style.left = x - 80 + 'px';
            small.style.top = y - 60 + 'px';
            let dis_x = box.offsetLeft + box.offsetWidth - client.clientX;
            let dis_y = box.offsetTop + box.offsetHeight - client.clientY;

            nav.style.backgroundPositionX = (80 - x) * 3 + 'px';
            nav.style.backgroundPositionY = (60 - y) * 3 + 'px';

            if (x - 80 < 0) {
                small.style.left = 0;
                nav.style.backgroundPositionX = 0;
            }
            if (dis_x <= 80) {
                small.style.left = box.offsetWidth - 160 + 'px';
                nav.style.backgroundPositionX = (160 - box.offsetWidth) * 3 + 'px';
            }
            if (y - 60 < 0) {
                small.style.top = 0;
                nav.style.backgroundPositionY = 0;
            }
            if (dis_y < 60) {
                small.style.top = box.offsetHeight - 120 + 'px';
                nav.style.backgroundPositionY = (120 - box.offsetHeight) * 3 + 'px';
            }

            small.style.backgroundColor = "rgba(135, 207, 235, 0.61)";

        }

        box.onmouseout = function () {
            small.style.backgroundColor="transparent"
        }

    </script>
</body>

</html>

感谢你能够认真阅读完这篇文章,希望小编分享的“JavaScript怎么实现放大镜效果”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js
AI