js之div跟随鼠标移动_鼠标滚动事件能绑定div吗-CSDN博客

本文链接：https://blog.csdn.net/qq_41795427/article/details/108769227

一、主要用到的相关属性：
1）onmouseover
2）clientX、clientY
3）pageX、pageY
4）document.body.scrollTop
5）document.documentElement.scrollTop;

二、实现

第一版本

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
    
            width:100px;
            height:100px;
            background-color:red;
            /***
               开启定位，定位很重要，可以尝试注释掉，试试效果
             */
            position:absolute;
        }
    </style>
    <script type="text/javascript">
    //使div可以随鼠标移动
    //获取box1
    let box1 = document.getElementById("box1")
    //绑定鼠标移动事件，可以发现，这个地方并不是给box1绑定鼠标移动事件，但我们给box1绑定时，会发现div只能随着鼠标往下移动，而不能往上，这是因为div的大小只有100px*100px，鼠标移动控制div的范围就只在100px*100px内，所以这里我们要给document进行鼠标移动事件绑定
    document.onmousemove = function(event){
    
    //这条语句是为了兼容IE8以下版本
    	event = event || window.event;
    //clientX和clientY:用于获取鼠标在当前的可见窗口
    //的坐标，而div的偏移量，是相对于整个页面的
    let left =</