javascript 的 clientX用法

最新推荐文章于 2023-11-19 21:45:31 发布

weixin_30311605

最新推荐文章于 2023-11-19 21:45:31 发布

阅读量340

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chabai/p/5145429.html

本文演示如何通过JavaScript监听鼠标移动事件，并实时调整页面上指定元素的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>测试</title>
</head>
<body >

<div id="div1" style="width: 100px; height: 100px; position: absolute;"></div>

<script>
   window.onload=function(){
       var oDiv=document.getElementById('div1');
       document.onmousemove=function(ev){
           var oEvent=ev||event;
           var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //解决chrome下scrollTop兼容性问题
           var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
            oDiv.style.top=oEvent.clientY+scrollTop+'px'; //clientX与scrollTop一般要同时使用
            oDiv.style.left=oEvent.clientX+scrollLeft+'px';
       }
   }
</script>
</body>
</html>