zoukankan      html  css  js  c++  java
  • 实现一个宽和高都是100像素的div可以用鼠标拖拽移动的效果

      html,body{
            width:100%;height:100%;margin:0px;padding:0px;
        }
        #box{
            width:100px;height:100px;background:pink;position:absolute;
        }
    <div id="box"></div>
    window.onload = function(){
            var box = document.getElementById('box');   
            box.onmousedown = function(e){     
                var offsetX = e.offsetX;       
                var offsetY = e.offsetY;
            
                document.body.onmousemove = function(e){
                    box.style.left = e.pageX-offsetX + 'px';
                    box.style.top = e.pageY-offsetY + 'px';
                }
                document.body.onmouseup = function(){
                    document.body.onmousemove = null;
                    document.body.onmouseup = null;
                }
            }
        }

    在function里面传了一个e,console.log打印出来,他是个对象,根据不同的事件打印出不同的对象。

    最后鼠标抬起的时候(onmouseup ),去掉鼠标移动和鼠标抬起事件。

  • 相关阅读:
    java中finally的使用
    String基本方法
    java文件读写常用方法
    java笔试面试(转载)
    单链表的反转
    单链表的冒泡排序
    Java快速教程
    Java快速教程
    后海日记(4)
    后海日记(3)
  • 原文地址:https://www.cnblogs.com/hezihao/p/5733901.html
Copyright © 2011-2022 走看看