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;

                             background: pink;

                             border-radius: 50%;

                             cursor: move;

                             position: absolute;

                     }

            </style>

    </head>

    <body>

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

    </body>

    <script>

            //获取元素

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

            console.log(ball);

            //声明全局变量

            var leftCha,topCha;

            //定义鼠标是否按下的标识

            var isDown = false;

            ball.onmousedown = function(e){

                     var e = e || window.event;

                     leftCha = e.clientX - ball.offsetLeft;

                     topCha = e.clientY - ball.offsetTop;

                     isDown = true;

            }

            window.onmousemove = function(e){

                     var e = e || window.event;

                     if(!isDown){

                             return;  //终止程序执行

                     }

                     ball.style.left = e.clientX - leftCha + 'px';

                     ball.style.top = e.clientY - topCha + 'px';

            }

            ball.onmouseup = function(e){

                     isDown = false;

            }

    </script>

    </html>

  • 相关阅读:
    iOS真机调试 for Xcode 5
    iOS/iphone开发如何为苹果开发者帐号APPID续费
    unity3d中布娃娃系统
    U3D实现与iOS交互
    两种方法连接MySql数据库
    Unity3D Gamecenter 得分上传失败的处理
    Unity3.5 GameCenter基础教程(转载)
    判断数字正则表达式
    (转)SQL server 2005查询数据库表的数量和表的数据量
    C#操作PowerDesigner代码
  • 原文地址:https://www.cnblogs.com/sherryStudy/p/onmousedown.html
Copyright © 2011-2022 走看看