JS实现控件跟随鼠标移动

最新推荐文章于 2024-04-16 19:44:59 发布

sdfujichao

最新推荐文章于 2024-04-16 19:44:59 发布

阅读量3.3k

点赞数 1

分类专栏： javascript 文章标签： JS事件监听控件跟随鼠标移动

本文链接：https://blog.csdn.net/sdfujichao/article/details/51274740

版权

javascript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

显示一个div，div内显示当前的时间。

让这个div随着鼠标的移动而移动。

<!DOCTYPE html>

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
           <script type="text/javascript">
               function mobile(){
                   var x = event.clientX;
                   var y = event.clientY;
                   //alert("fujichao");
                   document.getElementById("topid").style.left = x+"px";
                   document.getElementById("topid").style.top = y+"px";
               }
               function showTime(){
                   var date = new Date();
                   document.getElementById("topid").innerHTML= date.toLocaleString();
               }
               setInterval("showTime()",1000);

           </script>
   </head >
   <body οnlοad="showTime()" οnmοusemοve="mobile()" style="height: 800px; width: 1000px; background-color: aquamarine;">

       <div id="topid" style="border: 2px red solid;height: 200px; width: 300px;position: absolute;left: 200px; top: 200px;"></div>
   </body>
</html>

sdfujichao

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS实现控件跟随鼠标移动

function mobile(){ var x = event.clientX; var y = event.clientY; //alert("fujichao"); document.getElementById("topid
复制链接

扫一扫

专栏目录