鼠标跟随

实现一个简单的鼠标跟随效果。

代码如下

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标跟随</title>
</head>
<style type="text/css">
    #gen{
        width: 50px; height: 50px; background-color: #2fa; padding: 20px; position: absolute; color: #fff; text-align: center; 
    }
</style>
<body>
    <div id="gen">
        鼠标跟随
    </div>
    <script type="text/javascript">
        window.onmousemove = function(event){
            var oTop = document.getElementById("gen");
            var e = event || window.event;
            var scrollleft = document.documentElement.scorllLeft || document.body.scrollLeft;
            var scrolltop = document.documentElement.scorllTop || document.body.scrollTop;
            var x = e.clientX;
            var y = e.clientY;
            oTop.style.left = x + scrollleft + "px";
            oTop.style.top = y + scrolltop + "px";
        }
    </script>
</body>
</html>
复制代码

 

posted @   54墨玉  阅读(111)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
点击右上角即可分享
微信分享提示