javascript获取当前鼠标坐标的方法
作者:bea
本文实例讲述了javascript获取当前鼠标坐标的方法。分享给大家供大家参考。具体实现方法如下: 对于javascript获取当前鼠标坐标来说,得对不同浏览器的坐标位置有所了解。具体代码如下: 代码如下: <html> <head> <title>javascript获取当前鼠标坐标</title> <meta http-equiv="content-type" content="text/html;chars
本文实例讲述了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程序设计有所帮助。
有用 | 无用
对于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程序设计有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- DOM节点删除函数removeChild()用法实例
- 原生javascript实现图片弹窗交互效果
- 原生javascript实现图片按钮切换
- 原生javascript实现图片滚动、延时加载功能
- DOM节点的替换或修改函数replaceChild()用法实例
- 原生javascript实现Tab选项卡切换功能
- 推荐4个原生javascript常用的函数
- 原生js实现日期联动
- Javascript中innerHTML用法实例分析
- js实现从数组里随机获取元素
- javascript的tab切换原理与效果实现方法
- js中的事件捕捉模型与冒泡模型实例分析
- js中键盘事件实例简析
- js中this的用法实例分析
- js创建对象的方式总结
- js对象继承之原型链继承实例
- js对象的复制继承实例
- js面向对象之静态方法和静态属性实例分析
- js获取会话框prompt的返回值的方法