javascript获取当前鼠标坐标的方法

本文实例讲述了javascript获取当前鼠标坐标的方法。分享给大家供大家参考。具体实现方法如下：

对于javascript获取当前鼠标坐标来说，得对不同浏览器的坐标位置有所了解。具体代码如下：

代码如下:

<html>
<head>
<title>javascript获取当前鼠标坐标</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript">
 function mousePosition(ev){
  if(ev.pageX || ev.pageY){//firefox、chrome等浏览器
   return {x:ev.pageX,y:ev.pageY};
  }
  return {// IE浏览器
   x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
   y:ev.clientY + document.body.scrollTop - document.body.clientTop
  };
 }
 function mouseMove(ev){
  ev = ev || window.event;
  var mousePos = mousePosition(ev);
  document.getElementById('x').innerHTML = mousePos.x;
  document.getElementById('y').innerHTML = mousePos.y;
 }
 document.onmousemove = mouseMove;
</script>
<style type="text/css">
h3{color:blue;}
p{line-height:30px;height:30px;font-size:14px;width:500px;}
span{color:orange;font-weight:bold;}
</style>
</head>
<body>
 <h3>您的鼠标已经被跟踪</h3>
 <p> X 轴坐标：<span id="x"></span></p>
 <p> Y 轴坐标：<span id="y"></span></p>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • js与jquery中获取当前鼠标的x、y坐标位置的代码

    复制代码 代码如下: <div id="testDiv">放在我上面</div> <script type="text/javascript"> $('#testDiv').mousemove(function(e) { var xx = e.originalEvent.x || e.originalEvent.layerX || 0; var yy = e.originalEvent.y || e.originalEvent.l

  • Javascript 获取鼠标当前的位置实现方法

    Javascript 获取鼠标当前的位置实现方法

    有时候,我们需要得到窗口拖动或者鼠标移动的距离,此时可以通过计算鼠标前后在页面中的位置来得到想要的结果,下面介绍几个事件属性: 1.客户区坐标位置 鼠标事件都是在浏览器视口中的特定位置上发生的.这个位置信息保存在事件对象的 clientX 和 clientY 属性中.它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标(不包括页面滚动的距离).如下图所示: var div = document.getElementById("myDiv"); //获取元素 EventUtil.on(

  • js实现获取鼠标当前的位置

    js实现获取鼠标当前的位置

    有时候,我们需要得到窗口拖动或者鼠标移动的距离,此时可以通过计算鼠标前后在页面中的位置来得到想要的结果,下面介绍几个事件属性: 1.客户区坐标位置 鼠标事件都是在浏览器视口中的特定位置上发生的.这个位置信息保存在事件对象的 clientX 和 clientY 属性中.它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标(不包括页面滚动的距离).如下图所示: var div = document.getElementById("myDiv"); //获取元素 EventUtil.on(

  • js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性

    通过JS得到当前焦点的坐标 如下是得到当前焦点的坐标: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • javascript获取当前鼠标坐标的方法

    本文实例讲述了javascript获取当前鼠标坐标的方法.分享给大家供大家参考.具体实现方法如下: 对于javascript获取当前鼠标坐标来说,得对不同浏览器的坐标位置有所了解.具体代码如下: 复制代码 代码如下: <html> <head> <title>javascript获取当前鼠标坐标</title> <meta http-equiv="content-type" content="text/html;chars

  • js使用onmousemove和onmouseout获取鼠标坐标的方法

    本文实例讲述了js使用onmousemove和onmouseout获取鼠标坐标的方法.分享给大家供大家参考.具体如下: 下面的js代码演示了onmousemove和onmouseout事件的用法,鼠标在指定区域内移动时会动态显示鼠标坐标信息 <!DOCTYPE html> <html> <head> <script> function myFunction(e) { x=e.clientX; y=e.clientY; coor="Coordinat

  • JavaScript offset实现鼠标坐标获取和窗口内模块拖动

    JavaScript offset实现鼠标坐标获取和窗口内模块拖动

    offset offset 即偏移量,使用 offset 系列相关属性可以 动态的 获取该元素的位置(偏移).大小等,如: 元素距离带有定位父元素的位置 获取元素自身的大小(宽度高度) 注:返回的数值不带单位 offset 系列常用的属性包括:     element.offsetParent     返回作为该元素带有定位的父级元素,如果父级元素没有定位,则返回 body     注意,parentNode 和 offsetParent 还是有本质上的区别的:parentNode 返回的是直接

  • JavaScript获取指定元素位置的方法

    本文实例讲述了JavaScript获取指定元素位置的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: function showpane() {   var self = document.getElementById("eID");   var left = self.getBoundingClientRect().left + document.documentElement.scrollLeft;   var top = self.getBoundingClientR

  • Javascript 获取链接(url)参数的方法[正则与截取字符串]

    当然,我们也可以用正则直接匹配,文章中也给出了一个正则的例子. 分解链接的方式: 复制代码 代码如下: <script type="text/javascript"> <!-- // 说明:Javascript 获取链接(url)参数的方法 function getQueryString(name) { // 如果链接没有参数,或者链接中不存在我们要获取的参数,直接返回空 if(location.href.indexOf("?")==-1 || l

  • JavaScript获取当前cpu使用率的方法

    JavaScript获取当前cpu使用率的方法

    本文实例讲述了JavaScript获取当前cpu使用率的方法.分享给大家供大家参考,具体如下: 想获取当前系统cpu的使用率,如果允许使用hta,可以使用以下的代码获取当前cpu的使用率(较为精确) setInterval(function() { var locator=new ActiveXObject ("WbemScripting.SWbemLocator"); var service=locator.ConnectServer("."); var cpu=

  • JavaScript实现捕获鼠标坐标

    本文实例为大家分享了JavaScript实现捕获鼠标坐标的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件对象</title> <style> .box1{ width: 300px; height: 100px; border: 1px solid #

  • Javascript 获取链接(url)参数的方法

    方法1:将链接当作字符串 ,按照链接的格式分解,然后获取对应的参数值. 方法2:用正则直接匹配. 关键字:parameter 参数:location.href,url ,链接,javascript 方法1: 分解链接方式: 复制代码 代码如下: <script type="text/javascript"> function getQueryString(name) { // 如果链接没有参数,或者链接中不存在我们要获取的参数,直接返回空 if(location.href.

  • javascript获取系统当前时间的方法

    javascript获取系统当前时间的方法

    本文实例讲述了javascript获取系统当前时间的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>获取时间</title> <script type="text/javascript"> window.onload = function(){ showTime(); } function showTime(){

  • javascript获取当前的时间戳的方法汇总

    JavaScript 获取当前时间戳: 第一种方法: var timestamp = Date.parse(new Date()); 结果:1280977330000 第二种方法: var timestamp = (new Date()).valueOf(); 结果:1280977330748 第三种方法: var timestamp=new Date().getTime(): 结果:1280977330748 第一种:获取的时间戳是把毫秒改成000显示, 第二种和第三种是获取了当前毫秒的时间戳

随机推荐