鼠标贪吃蛇效果

最新推荐文章于 2021-12-22 00:43:57 发布

leigangg

最新推荐文章于 2021-12-22 00:43:57 发布

阅读量282

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/leigangg/article/details/105337643

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div{
            height: 200px;
            width: 200px;
            background-color: #f00;
            position: absolute;
        }
    </style>
</head>
<body style="height: 2000px;">
    <div id="div"></div>

    <script>
        // 把 scrollTop和scrollLeft封装成一个函数 已josn的形式返回出去,
        function getPos(ev){
            var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
            return {x: ev.clientX+scrollLeft, y:ev.clientY+scrollTop};
        };
        document.onmousemove = function(ev){
             // event它是一个内置对象
            var oEvent = ev||event;
            var div = document.getElementById('div');
            // 当我们需要用到scrollTop和scrollLeft的时候,只需要调用getPos 
            var pos = getPos(oEvent);
            div.style.left = pos.x+'px';
            div.style.top = pos.y+'px';
        };
        
    </script>
</body>
</html>

leigangg

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
鼠标贪吃蛇效果

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

扫一扫