鼠标跟随

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

代码如下

<!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 @ 2016-07-26 11:10  54墨玉  阅读(111)  评论(0)  编辑  收藏  举报