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程序设计有所帮助。
相关推荐
-
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
-
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 获取鼠标当前的位置实现方法
有时候,我们需要得到窗口拖动或者鼠标移动的距离,此时可以通过计算鼠标前后在页面中的位置来得到想要的结果,下面介绍几个事件属性: 1.客户区坐标位置 鼠标事件都是在浏览器视口中的特定位置上发生的.这个位置信息保存在事件对象的 clientX 和 clientY 属性中.它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标(不包括页面滚动的距离).如下图所示: var div = document.getElementById("myDiv"); //获取元素 EventUtil.on(
-
js实现获取鼠标当前的位置
有时候,我们需要得到窗口拖动或者鼠标移动的距离,此时可以通过计算鼠标前后在页面中的位置来得到想要的结果,下面介绍几个事件属性: 1.客户区坐标位置 鼠标事件都是在浏览器视口中的特定位置上发生的.这个位置信息保存在事件对象的 clientX 和 clientY 属性中.它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标(不包括页面滚动的距离).如下图所示: var div = document.getElementById("myDiv"); //获取元素 EventUtil.on(
-
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实现鼠标坐标获取和窗口内模块拖动
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使用率的方法.分享给大家供大家参考,具体如下: 想获取当前系统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获取系统当前时间的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!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显示, 第二种和第三种是获取了当前毫秒的时间戳
随机推荐
- 解密ASP源代码
- isArray()函数(JavaScript中对象类型判断的几种方法)
- js中如何复制一个对象并获取其所有属性和属性对应的值
- iOS点击推送消息跳到应用指定页面方法
- JavaScript获取网页表单提交方式的方法
- PHP实现多关键字加亮功能
- JSP简单添加,查询功能代码
- 统计jQuery中各字符串出现次数的工具
- qTip2 精致的基于jQuery提示信息插件
- javascript实现仿IE顶部的可关闭警告条
- js 针对html DOM元素操作等经验累积
- Nginx反斜杠自动解码问题解决方法
- for循环中删除map中的元素valgrind检测提示error:Invalid read of size 8
- 详解java中的PropertyChangeSupport与PropertyChangeListener
- 深入java线程池的使用详解
- HTML中的setCapture和releaseCapture使用介绍
- c#测试反射性能示例
- vue组件中使用iframe元素的示例代码
- vmware 上ubuntu server连接外网的实现方法
- JS实现动态添加外部js、css到head标签的方法