zoukankan      html  css  js  c++  java
  • javascript -- (点击div,随鼠标移动)

    涉及鼠标三个事件:

    onmousedown、onmousemove、onmouseup

    <script type = "text/javascript">

      var body = document.getElementsByTagName('body')[0];

      //生成div,并设置其样式

      var box = document.createElement('div');

      box.style.width = '100px';

      box.style.height = '100px';

      box.style.background = 'blue';

      box.style.position = 'absolute';

      box.onmousedown = function(event) {

        event = event || window.event;

        //获取鼠标点击的位置距离div左边的距离

        var positionX = event.clientX - box.offsetLeft;

        var positionY = event.clientY - box.offsetTop;

        document.onmousemove = function(event) {

           event = event || window.event;

           var divX = event.clientX - positionX;

           var divY = event.clientY - positionY;

           box.style.left = divX + 'px';

           box.style.top = divY + 'px';

        }

        document.onmouseup = function() {

           document.onmousemove = null;

        }  

      }

      body.appendChild(box);

    </script>

  • 相关阅读:
    HBase 负载均衡
    HBase的写事务,MVCC及新的写线程模型
    HBase RegionServer宕机处理恢复
    分布式事务实现-Percolator
    MVC框架
    06-JS中li移动第二种形式
    05-JS中li移动第一种形式
    04-JS中文档碎片
    03-JS中添加节点
    02-JS中父节点
  • 原文地址:https://www.cnblogs.com/zhao12354/p/5762406.html
Copyright © 2011-2022 走看看