鼠标跟随效果

 

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>鼠标跟随效果</title>
        <style>
            #div1{background: url(girl.gif) no-repeat; width: 200px; height: 200px; position: absolute;}
            body{background-color: black}
        </style>
        <script>
            window.onload = function(){
                var oDiv = document.getElementById('div1');
                //添加鼠标移动事件
                document.onmousemove = function(ev){
                    //获取鼠标移动对象
                    var e = ev || window.event;
                    //修改样式
                    oDiv.style.left = e.clientX - 70 + 'px';// -70是让精灵更靠近鼠标一点,因为图片有黑背景
                    oDiv.style.top = e.clientY - 70 + 'px';
                }
            }
        </script>
    </head>
    <body>
        <div id = 'div1'></div>
    </body>
</html>

浏览器效果：

案例中使用的图片：

 

posted @ 2018-09-05 17:20  暗恋桃埖源  阅读(289)  评论(0)    收藏  举报