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>

  • 相关阅读:
    lodash kebabCase
    lodash escapeRegExp 转义正则特殊字符
    lodash capitalize 首字母大写
    lodash camelCase 驼峰写法
    lodash pick
    lodash random
    lodash round
    Linux 目录结构
    每天一个linux命令(6/18):lsof命令
    Linux 内核编译步骤及配置详解
  • 原文地址:https://www.cnblogs.com/zhao12354/p/5762406.html
Copyright © 2011-2022 走看看