zoukankan      html  css  js  c++  java
  • 鼠标跟随效果

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>鼠标跟随效果</title>
            <style>
                #div1{background: url(girl.gif) no-repeat;  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>

    浏览器效果:

    案例中使用的图片:

  • 相关阅读:
    作业
    复习整理3
    复习整理2
    复习整理1
    书籍-os 相关
    书籍正则
    书籍
    SocketServer 简化编写网络服务器的步骤
    socket 粘包
    经典排序算法
  • 原文地址:https://www.cnblogs.com/taohuaya/p/9593340.html
Copyright © 2011-2022 走看看