放大镜效果实现1

最新推荐文章于 2023-06-08 17:08:54 发布

爱生活，爱编程

最新推荐文章于 2023-06-08 17:08:54 发布

阅读量217

点赞数

分类专栏： javascript基础笔记

本文链接：https://blog.csdn.net/qq_15009739/article/details/109799297

版权

javascript基础笔记专栏收录该内容

83 篇文章 1 订阅

订阅专栏

1，如果一个大目标，看起来很吓人，只要拆解出小目标，
然后实现小目标，大目标就自然而然搞定了

a 让一个盒子背景色半透明

  .mask {
        
            background: #FEDE4F;
            opacity: .5;
       }

b 当鼠标悬浮的时候，显示move样式
cursor:move;

c ， 当大盒子mouseenter 的时候，让mask 盒子显示出来

 smallBox.addEventListener("mouseenter", function() {
                // 在这个时候我们要进行相对应的处理
                // 让标记盒子显示出来
                maskBox.style.display = "block"
            })

d : 下一个目标就是让我们的标记盒子跟着鼠标移动而移动，
这个设计起来比较简单，不是标准的拖拽，而是让鼠标始终显示在标记盒子的
中心点
     // 外部左边给拿出来
            smallBox.addEventListener("mousemove", function(e) {
                if (maskBox.style.display == "block") {
                    // 在这边就直接移动就行了
                    // 1 ，得到位置
                    var centerX = e.pageX - smallBox.offsetLeft;
                    var centerY = e.pageY - smallBox.offsetTop;
                    // 2计算标记在外部盒子的left 和top 

                    // 3 设置就行了

                    maskBox.style.left = (centerX - 150) + "px";
                    maskBox.style.top = (centerY - 150) + "px";
                }
            })

e, 对标记盒子边界进行处理

就是说，不能超出外面的盒子
                    }
边界处理，就是上下进行处理就行了
f: 右边大图片显示：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .small {
            position: relative;
            left: 0px;
            top: 0px;
            width: 398px;
            height: 398px;
            border: 1px solid #CCC;
            text-align: center;
        }
        
        .small img {
            width: 398px;
            height: 398px;
            background-color: pink;
        }
        
        .mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            height: 300px;
            display: none;
            background: #FEDE4F;
            opacity: .5;
            cursor: move;
        }
    </style>

</head>

<body>


    <div class="small">
        <img src="./upload/b3.png" alt="">
        <div class="mask"></div>
    </div>


    <script>
        window.onload = function() {
            var smallBox = document.querySelector(".small")
            var maskBox = document.querySelector(".mask")
            smallBox.addEventListener("mouseenter", function() {
                // 在这个时候我们要进行相对应的处理
                // 让标记盒子显示出来
                maskBox.style.display = "block"

            })

            smallBox.addEventListener("mouseleave", function() {
                    // 在这个时候我们要进行相对应的处理
                    // 让标记盒子显示出来
                    maskBox.style.display = "none"

                })
                // 外部左边给拿出来
            smallBox.addEventListener("mousemove", function(e) {
                if (maskBox.style.display == "block") {
                    // 在这边就直接移动就行了
                    // 1 ，得到位置
                    var centerX = e.pageX - smallBox.offsetLeft;
                    var centerY = e.pageY - smallBox.offsetTop;
                    // 2计算标记在外部盒子的left 和top 

                    // 3 设置就行了,边界处理
                    var left = centerX - 150;
                    var top = centerY - 150;
                    if (left < 0) {
                        left = 0;
                    }
                    if (top < 0) {
                        top = 0;
                    }
                    if (top > (398 - 300)) {
                        top = 98;
                    }
                    if (left > (398 - 300)) {
                        left = 98;
                    }


                    maskBox.style.left = left + "px";
                    maskBox.style.top = top + "px";
                }
            })


        }
    </script>
</body>

</html

行，具体知识点我都标记好，大家可以一个一个小目标去实现！

右侧大图展示，我们放到下一篇中，不要着急

爱生活，爱编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
放大镜效果实现1

1，如果一个大目标，看起来很吓人，只要拆解出小目标，然后实现小目标，大目标就自然而然搞定了a 让一个盒子背景色半透明 .mask { background: #FEDE4F; opacity: .5; }b 当鼠标悬浮的时候，显示move样式cursor:move;c ，当大盒子mouseenter 的时候，让mask 盒子显示出来 smallBox.addEventListener("mousee.
复制链接

扫一扫

专栏目录