js实现大框内小盒子鼠标跟随

我秃了，我强了，我忘了

于 2023-04-01 09:52:36 发布

阅读量157

点赞数

文章标签： javascript html css html5

本文链接：https://blog.csdn.net/z2149750154/article/details/129893115

版权

第一步：先画两个div，即大盒子和小盒子

第二步：添加样式

第三步，进行js绘制

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

        .box1{
            width: 1000px;
            height: 600px;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
            background-color: rgb(163, 208, 247);
        }
        .sun1{
            width: 100px;
            height: 100px;
            /* margin-top: -50px;
            margin-left: -50px; */
            position: absolute;
            background-color: rgb(240, 120, 150);
            opacity: 0;
        }
    </style>
</head>




<body>
        <div class="box1">
            <div class="sun1"></div>
        </div>
 



    <script>
        var sun = document.querySelector('.sun1')
        var box = document.querySelector('.box1')

        
        var max = box.clientWidth - sun.offsetWidth
        var may = box.clientHeight - sun.offsetHeight


        var next = box.clientWidth + box.offsetLeft  //?
        var up = box.clientHeight + box.offsetTop


        document.onmousemove = function(e){
            var x = e.x - box.offsetLeft - sun.offsetWidth/2 ;
            var y = e.y - box.offsetTop - sun.offsetHeight/2;
            if(x<0)x=0
            if(y<0)y=0
            if(x>max)x=max;
            if(y > may)y = may ;
            sun.style.left = x + 'px' ;
            sun.style.top = y + 'px' ;
            
            
            if(e.x > next || e.x < box.offsetLeft) sun.style.opacity = 0;
            if(e.x < next && e.x > box.offsetLeft)sun.style.opacity = 1 ;   //重点         
            if(e.y > up || e.y < box.offsetTop) sun.style.opacity = 0 ;
        }
    </script>
</body>
</html>