jQuery获取鼠标指针坐标

快乐打工仔 分类:实例代码

实际应用中,可能需要获取当前鼠标的坐标,下面就来简单介绍一下如何实现此功能。

当然例子非常简单,大家可以根据实际需要灵活的应用和扩展。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#mytest {
  width:150px;
  height:150px;
  background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#mytest").mousemove(function(e){ 
    $("span").text("x:"+e.pageX+"y:"+e.pageY+"") 
  }) 
}) 
</script>
</head>
<body>
<div id="mytest"></div>
<div>当前鼠标指针坐标:<span></span></div>
</body>
</html>

要注意的是,此坐标并不相对于div的,而是获取的鼠标指针在文档的坐标。

相关阅读:

(1).mousemove事件参阅jQuery mousemove事件一章节。

(2). text()参阅jQuery text()方法一章节。

(3).pageX属性参阅jQuery event.pageX属性一章节。

jQuery获取鼠标指针坐标,这样的场景在实际项目中还是用的比较多的,关于jQuery获取鼠标指针坐标就介绍到这了。

jQuery获取鼠标指针坐标属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容