zoukankan      html  css  js  c++  java
  • 盒子跟随鼠标移动而移动(兼容IE8)

    需求

    ​ 通过JavaScript使盒子跟随着鼠标的移动而移动,并且当页面出现滚动条时,盒子也会跟随鼠标正常移动(兼容IE8)

    在这里插入图片描述

    代码

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>div跟随鼠标移动</title>
      <style>
          div{
               200px;
              height: 200px;
              background-color: skyblue;
              /*注意此处需要设置盒子的定位方式,否则后面设置盒子的偏移量无效*/
              position: absolute;
          }
          body{
               2000px;
              height: 2000px;
          }
      </style>
      <script>
          window.onload = function () {
              let box = document.getElementById("box");
              let odj = document.documentElement;
              odj.onmousemove = function (event) {
                  // 解决IE8对event的兼容性问题
                  event = event || window.event;
                  // 解决body和documentElement的兼容性问题(谷歌浏览器和其他浏览器的兼容性)
                  var st = document.body.scrollTop || document.documentElement.scrollTop;
                  var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
                  //设置盒子的水平偏移量	注意需要加上单位
                  box.style.left = event.clientX + sl + "px";
                  //设置盒子的垂直偏移量
                  box.style.top = event.clientY + st + "px";
              };
          };
      </script>
    </head>
    <body>
    <div id="box"></div>
    </body>
    </html>
    
  • 相关阅读:
    pip的认识
    java动态代理
    hadoop集群环境配置成功与否查看方法
    input输入框只能输入数字、字母相关组合
    ASP.NET Core MVC上传、导入、导出知多少
    MQTT
    高德地图
    油猴脚本
    excel中001如何输入
    WebPageBase.IsSectionDefined(String) 方法
  • 原文地址:https://www.cnblogs.com/TomHe789/p/12687557.html
Copyright © 2011-2022 走看看