JavaScript實現放大鏡效果

本文例項為大家分享了實現放大鏡效果的具體程式碼，供大家參考，具體內容如下

這次實現的效果如下：

JavaScript實現放大鏡效果

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

1、首先我們需要使用html和css規劃好整體的佈局，即兩個相鄰的盒子A和B，左邊的盒子A中還有一個小盒子S。為了實現相鄰，我採用的方法是為其均設定position:absolute ，然後設定left和top的值來使其相鄰。
小盒子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=www.cppcns.com 
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,0.7);
            vertical-align: bottom;
        }

        #nav {
            width: 480px;
            height: 360px;
            border: 1px solid rgba(255,0.7);
            position: absolute;
            left: 582px;
            top: 100px;
            backgrowww.cppcns.comund-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="Script實現放大鏡效果">
    </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.stylwww.cppcns.come.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;
          vpNFZcjmg      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實現放大鏡效果

JavaScript實現放大鏡效果程式碼示例

JavaScript實現放大鏡效果

JavaScript影象放大鏡效果實現方法詳解

javascript實現倒計時效果

vue實現放大鏡效果

JS實現放大鏡效果

用js實現放大鏡效果

基於javascript實現放大鏡特效

javascript實現放大鏡功能

jQuery實現放大鏡效果

Javascript實現打鼓效果

用Javascript實現倒計時效果

JavaScript實現手風琴效果

Vue3.0 自己實現放大鏡效果案例講解

JavaScript實現年曆效果

如何利用vue3實現放大鏡效果例項詳解

js實現放大鏡效果的思路與程式碼

JavaScript實現樓層效果

javaScript實現放大鏡特效

JavaScript實現放大鏡詳細

JavaScript實現放大鏡效果

相關推薦