放大镜效果页面展示

最新推荐文章于 2024-09-26 01:42:12 发布

流动的白沙

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量90

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Linshu__/article/details/121071667

版权

本文介绍了一个网页中利用CSS和JavaScript实现的交互效果，当鼠标移动到一个小型图片（.tiny）上时，会显示一个黄色遮罩层，并根据鼠标位置调整大图片（.big）的大小。这种动态响应设计展示了前端定位和事件监听的技巧。

摘要由CSDN通过智能技术生成

<!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>
        <link rel="stylesheet" href="./css/base.css">
        <style>
            .tiny {
                position: relative;
                top:100px;
                left:100px;
                float: left;
                width: 200px;
                height: 200px;
                background: url(./images/wechat.jpg) -1px 39%;
                background-size: cover;
            }

            .mask {
                display: none;
                position: absolute;
                top:0;
                width: 50px;
                height: 50px;
                background-color:yellow;
                opacity: .5;
            }

            .big {
                position: relative;
                margin:100px 0 0 330px;
                width: 400px;
                height: 400px;
                overflow: hidden;
            }
            img {
                position: absolute;
                top:0;
                width: 120%;
            }
        </style>
    </head>
    <body>
        <div class="contact">
            <div class="tiny"> <div class="mask"></div></div>
            <div class="big">
                <img src="./images/wechat.jpg" alt="">
            </div>
        </div>

        <script>
            window.addEventListener('load',function(){
                var mask = document.querySelector(".mask")
                var tiny = document.querySelector(".tiny")
                var big = document.querySelector('.big')
                var bigImg = document.querySelector('img')

                // 鼠标移入移出，遮罩层出现消失
                tiny.addEventListener('mouseenter',function(){
                    mask.style.display = 'block'
                })
                tiny.addEventListener('mouseleave',function(){
                    mask.style.display = 'none'
                })

                  
                tiny.addEventListener('mousemove',function(e){
                    // x和y就是鼠标在盒子里面的坐标
                    // tiny盒子也要加定位，绝对定位或者是相对定位，因为要拿到mask在tiny里面的坐标
                    var x = e.pageX - tiny.offsetLeft
                    var y = e.pageY - tiny.offsetTop
                    var maskMax = tiny.offsetWidth - mask.offsetWidth
                     
                    // maskX maskY 就是mask在父盒子tiny里面的定位,至于为什么要减去自身宽高的一半，是一个要往上往左走一半，落在中心
                    var maskX = x - mask.offsetWidth/2
                    var maskY = y - mask.offsetHeight/2

                    if (maskX <= 0) {
                        maskX = 0;
                    } else if (maskX >= maskMax) {
                        maskX = maskMax;
                    }

                    if (maskY <= 0) {
                         maskY = 0;
                    } else if (maskY >= maskMax) {
                        maskY = maskMax;
                    }

                    mask.style.left = maskX + 'px'
                    mask.style.top =  maskY + 'px'
                    mask.style.cursor = 'move'

                     //  3.大图片的移动距离 = 遮挡层的移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
                    var bigMax = bigImg.offsetWidth - big.offsetWidth; //大图片最大移动距离
                    // 大图片的移动距离
                    var bigX = maskX * bigMax / maskMax;
                    var bigY = maskY * bigMax / maskMax;

                    // bigImg也要加定位
                    bigImg.style.left =-bigX + 'px';
                    bigImg.style.top = -bigY + 'px';
                    
                })
            
            })
        </script>
    </body>
</html>