030 div随鼠标移动

最新推荐文章于 2022-10-25 12:04:46 发布

Manta__

最新推荐文章于 2022-10-25 12:04:46 发布

阅读量94

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Manta__/article/details/104973507

版权

JavaScript 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   #box1{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
   }
  </style>
  <script type="text/javascript">
   window.οnlοad=function(){
    
    //div可以随鼠标移动
    
    //box1获取
    var box1=document.getElementById("box1");
    //绑定鼠标移动事件
    
    //若给box1绑定，块只能往下走，出了块就没作用
    document.οnmοusemοve=function(event){
     
     //兼容问题
     event=event||window.event;
     
     /* chrome认为浏览器的滚动条是body的，可以通过body. scrollTop来获取
     *火狐等浏览器认为浏览器的滚动条是html的，
     */
     var st = document.body.scrollTop||document.documentElement.scrollTop;
     //var st = document . documentElement. scrollTop;
     var sl = document.body.scrollLeft||document.documentElement.scrollLeft;
     
     
     
     //获取鼠标坐标
     //clientX和clientY
     //用于获取鼠标在当前的可见窗口的坐标
     //div的偏移量，是相对于整个页面的
     //pageX和pageY可以获取鼠标相对于当 前页面的坐标
     //但是这个两个属性在IE8中不支持， 所以如果需要兼容IE8，则不要使用
     var left=event.clientX;
     var top=event.clientY;
     //var left=event.pageX;
     //var top=event.pageY;
     
     //设置div偏移量，只对开启定位元素起作用
     //box1.style.left=left+"px";
     //box1.style.top=top+"px";
     
     box1.style.left=left+sl+"px";
     box1.style.top=top+st+"px";
     
    }
   }
  </script>
 </head>
 <body style="height: 1000px;width: 2000px;">
  <div id="box1"></div>
 </body>
</html>

Manta__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
030 div随鼠标移动

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ wi...
复制链接

扫一扫