JavaScript(十五)——HTML DOM 对象知识点(一)____div跟随鼠标移动

妖狐艹你老母 2023-02-16 12:25 29阅读 0赞

# Event #

> 想要实现div跟随鼠标移动
> 
>  我们应该知道有关鼠标的event事件

** **

*  **onmousedown   当鼠标按下时发生**
 *  **onmouseup       当鼠标松开时发生**
 *  **onmousumove    当鼠标移动时时发生**
 *  **onmouseout      当鼠标移出某元素时发生**
 *  **onmouseover   当鼠标移动到某元素时发生**

## **这里用的时onmousemove 当鼠标移动时div跟着动** ##

首先我们需要一个div  需要绝对定位，代码如下(div id 为box)

#box{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;

**我们想一下，想要鼠标动div跟着动，需要什么？**

**第一，鼠标位置**

**第二，改变div的位置**

**第三，鼠标应该在div内的时候，div才能动**

**知道这3点就可以写代码了**

--------------------

获取div 绑定响应函数

evet.clientX鼠标相对浏览器的水平坐标

document.documentElement.scrollTop 这个是获取滚动条滚动的距离  但是火狐不支持这种方法

document.body.scrollTop   跟上边一样  但是只有火狐支持这种方法

var box = document.getElementById("box");
        document.onmousemove = function (event) {
            //兼容性
            event = event || window.event;
    
            var st = document.documentElement.scrollTop || document.body.scrollTop ;
            var sl = document.documentElement.scrollLeft || document.body.scrollLeft ;
            var left = event.clientX;
            var top = event.clientY;
            box.style.left = left + sl +"px";
            box.style.top = top +st+"px";
    
        }

结束  886  努力学习！