学习啦 > 学习电脑 > 电脑硬件知识 > 键盘鼠标 > js怎么设置鼠标位置

js怎么设置鼠标位置

时间: 乐恒1051 分享

js怎么设置鼠标位置

学习啦在线学习网   在前段使用JavaScript开发获取鼠标当前位置来计某个功能,如何获取鼠标当前的位置,其实很多人都不知道怎么做,为此学习啦小编为大家整理推荐了相关的知识,希望大家喜欢。

  js设置鼠标位置的方法

  新建一个html代码页面,在这个html页面找到<body>,然后在这个<body>里创建一个用来显示坐标位置的<div>,并给这个<div>添加一个id。如图

学习啦在线学习网   创建<div>的代码:

  <div id="point-loc"></div>

  使用pageX、pageY获取鼠标当前位置。在<title>标签后面新建一个<script>,创建鼠标移动时获取鼠标当前的位置。如图:

  js代码:

学习啦在线学习网   <script type="text/javascript">

学习啦在线学习网   document.onmousemove = function(e){

学习啦在线学习网   var loc = "当前位置 x:"+e.pageX+",y:"+e.pageY

  document.getElementById("point-loc").innerHTML = loc;

  }

  </script>

学习啦在线学习网   保存html后使用浏览器打开即可看到效果。如图:

  4页面所有代码:

学习啦在线学习网   <!DOCTYPE html>

学习啦在线学习网   <html>

  <head>

  <meta charset="UTF-8">

学习啦在线学习网   <title>js获取鼠标位置</title>

  <script type="text/javascript">

  document.onmousemove = function(e){

学习啦在线学习网   var loc = "当前位置 x:"+e.pageX+",y:"+e.pageY

  document.getElementById("point-loc").innerHTML = loc;

  }

学习啦在线学习网   </script>

  </head>

  <body>

学习啦在线学习网   <div id="point-loc"></div>

  </body>

学习啦在线学习网   </html>


js怎么设置鼠标位置相关文章:

1.js设置鼠标光标形状

2.怎么用js获取鼠标移动坐标

3.js怎么获取鼠标在div中的相对位置

4.怎么用js实现简单鼠标跟随效果

5.jS获取鼠标坐标、获取鼠标像素点

3293468