快捷導(dǎo)航

JavaScript實現(xiàn)放大鏡效果

更新時間：2021年10月27日 09:50:38 作者：wait......

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)放大鏡效果的具體代碼，供大家參考，具體內(nèi)容如下

這次實現(xiàn)的效果如下：

這次的案例稍微有一點難度，在css和js上都需要多加思考，話不多說，讓我們來開始吧~

1、首先我們需要使用html和css規(guī)劃好整體的布局，即兩個相鄰的盒子A和B，左邊的盒子A中還有一個小盒子S。為了實現(xiàn)相鄰，我采用的方法是為其均設(shè)置position:absolute ，然后設(shè)置left和top的值來使其相鄰。
小盒子S我們同樣可以為其設(shè)置position:absolute，調(diào)整一下背景顏色即可。

2、然后我們需要使用js來設(shè)置動畫效果，即：鼠標(biāo)放在盒子A上時，小盒子S的位置會隨著鼠標(biāo)的移動發(fā)生移動，同時盒子B中的圖像會成為盒子S覆蓋圖像的放大版。如何實現(xiàn)呢？

3、首先實現(xiàn)小盒子S的位置變化：調(diào)用盒子A的onmousemove函數(shù)，傳入?yún)?shù)client，表示時間鼠標(biāo)在盒子A上移動。我們通過client獲取鼠標(biāo)的位置(clientX，clientY)，然后通過(clientX-boxA.offsetLeft,clientY-boxA.offsetTop)可獲得鼠標(biāo)在圖像上的相對坐標(biāo)，通過此值減去盒子S的寬度、高度的一半即可獲得盒子S在A中的位置。
但是要注意，記得為盒子S設(shè)置邊界，當(dāng)橫坐標(biāo)為0或為A盒子寬度、縱坐標(biāo)為0或者A盒子高度時，要使其坐標(biāo)固定。

4、接著實現(xiàn)盒子B中的圖像會成為盒子S覆蓋圖像的放大版：我們首先來思考一個問題，這個放大效果如何才能實現(xiàn)呢？從我的實現(xiàn)角度出發(fā)，對于盒子B來說，它首先需要一個背景圖==盒子A中的圖像，然后將其放大某個倍數(shù)x，當(dāng)盒子S移動時，改變B的background-position為y，達到放大+移動的效果。

5、最后一點，x和y的值是多少呢？（假定S、A、B均為等比例） x：將盒子B放大的倍數(shù)應(yīng)該等同于A的大小除以S的大小，這樣能達到相同的圖像范圍。y：B移動時的距離變化應(yīng)該示盒子S移動的距離*（盒子B的大小除以S的大?。?。可以多加思考~

可能我的實現(xiàn)方法過程比較復(fù)雜，大家如果想到更好的方法可以留言呀

代碼如下：

<!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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: