zoukankan      html  css  js  c++  java
  • 【案例】DIV随鼠标移动而移动

    <!DOCTYPE html>

    <html lang="en">

    <head>

            <meta charset="UTF-8">

            <title>div跟随鼠标移动而移动</title>

            <style>

                     *{

                             margin: 0;

                             padding: 0;

                     }

                     #ball{

                             200px;

                             height: 200px;

                             border-radius: 50%;

                             background: pink;

                             position: absolute;

                             cursor: move;

                     }

            </style>

    </head>

    <body>

            <div id="ball"></div>

    </body>

    <script>

            //获取元素

            var ball = document.getElementById('ball');

            console.log(ball);

            //将鼠标的移动事件交给外部更大的容器window,以保证鼠标不丢失

            /*ball.onmousemove = function(e){}*/

            window.onmousemove = function(e){

                     var e = e || window.event;

                     var newLeft = e.clientX - ball.offsetWidth / 2;

                     var newTop = e.clientY - ball.offsetHeight / 2;

                     ball.style.left = newLeft + 'px';

                     ball.style.top = newTop + 'px';

            }

    </script>

    </html>

  • 相关阅读:
    测试管理_测试工作量估算
    Mycat原理、应用场景
    linux负载均衡总结性说明(四层负载/七层负载)
    Spring自动装配Bean的五种方式
    计算机组成原理总结
    MyBatis总结
    系统吞吐量(TPS)、用户并发量、性能测试概念和公式
    初探Nginx服务器的整体架构
    mybatis架构理解
    linux环境上运行.net core 初探
  • 原文地址:https://www.cnblogs.com/sherryStudy/p/mousemove.html
Copyright © 2011-2022 走看看