JavaScript-鼠标跟随

最新推荐文章于 2022-07-19 16:14:00 发布

飒小北

最新推荐文章于 2022-07-19 16:14:00 发布

阅读量280

点赞数

分类专栏： JavaScript 文章标签： JavaScript 鼠标跟随

本文链接：https://blog.csdn.net/tian_tian_gong/article/details/87625472

版权

JavaScript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

	<!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>
       .test{
           margin-top: 20px;
           width: 20px;
           height: 20px;
           background-color: red;
           position: absolute;
           animation: test infinite 1s ;
           border-radius: 20px;
           display: none;
       }

       @keyframes test {
           from{
               background-color:red;
           }
           to{
               background-color:green;
           }
       }
    </style>

</head>


   
 <div id="test" class="test">
 </div>
    <script>
        window.onload = function () {
          // 鼠标跟随
          var test=document.getElementById("test");
          document.onmousemove=function(event){
            test.style.display="inherit";
            event=event||window.event;
            var st=document.body.scrollTop||document.documentElement.scrollTop;
            var sl=document.body.scrollLeft||document.documentElement.scrollLeft;
            var left=event.clientX;
            var top=event.clientY;
            test.style.left=left+sl+"px";
            test.style.top=top+st+"px";
          }
        }
    </script>
</body>

</html>

飒小北

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-鼠标跟随

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫

专栏目录