登陆 注册

javascript实现鼠标移动定位

守望者 2020-04-06 217人围观 ,发现0个评论 javascript

     今天我们用javascript实现鼠标定位,使得当鼠标在电脑屏幕上移动时,能够获取实时获取鼠标的屏幕坐标,

并将坐标内容显示在标签中,该标签也将实时跟踪坐标。


QQ截图20200406091501.jpg




html部分:


   这部分我们只放一个p标签,用来显示当前鼠标在屏幕上的坐标位置,并实时跟踪鼠标:

 <p id="i">这是一个标签</p>


css部分:

    body设置相对定位,p设置绝对定位,以便后面能够实时对p标签进行定位:

 body{
            position: relative;
        }
        p{
            position: absolute;
        }


javascript部分:

   定义一个move函数,传入三个参数,分别是

        o : 需要被定位的元素,

        x : 横坐标,

        y : 纵坐标。

  对元素o进行定位,同时修改内容为当前坐标。:

 function move(o,x,y){
            
             o.style.left = x+"px";
             o.style.top = y+"px";
             
             var content = "当前位置:("+x+","+y+")";
             o.innerText = content;
        }


 获取p标签,并为它添加鼠标移动监听,在鼠标移动过程中,将获取鼠标坐标并调用move()函数:

  var a = document.getElementById("i");
           document.addEventListener("mousemove",function(e){
                 var x = e.screenX;
                 var y = e.screenY;
                
                 move(a,x,y);
           },true);


全部实例代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>

    <style>
    
        body{
            position: relative;
        }
        p{
            position: absolute;
        }
    </style>
    
    
    <script>
   
        function move(o,x,y){
            
             o.style.left = x+"px";
             o.style.top = y+"px";
             
             var content = "当前位置:("+x+","+y+")";
             o.innerText = content;
        }
       window.onload = function(){
           
           var a = document.getElementById("i");
           document.addEventListener("mousemove",function(e){
                 var x = e.screenX;
                 var y = e.screenY;
                
                 move(a,x,y);
           },true);
           
           
       }
    </script>
    
    </head>
    
    <body>
       
        <p id="i">这是一个标签</p>
    </body>
    
</html>


      转发请附上本文链接:https://tufeng.xyz/javascript/41.html,谢谢合作!

请发表您的评论
请关注微信公众号
微信二维码