<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body onmouseMove="getXY(event)">
<script language="JavaScript">
<!--
function mouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
return evt.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
else return null;
}
function mouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
return evt.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
else return null;
}
function getXY(event)
{
var e = event || window.event;
var x = mouseX(e);
var y = mouseY(e);
document.getElementById("XY").innerHTML = "X:" + x + "<br />Y:" + y;
}
function getX(elementID)
{
var el = elementID
return el.offsetLeft
}
function getY(elementID)
{
var el = elementID
return el.offsetTop
}
function getElementPositionX(elemID)
{
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
while(offsetTrail)
{
offsetLeft += offsetTrail.offsetLeft;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1 &&
typeof(document.body.leftMargin) != "undefined") {
offsetLeft += document.body.leftMargin;
}
return offsetLeft;
}
function getElementPositionY(elemID)
{
var offsetTrail = document.getElementById(elemID);
var offsetTop = 0;
while(offsetTrail)
{
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1 &&
typeof(document.body.leftMargin) != "undefined") {
offsetTop += document.body.topMargin;
}
return offsetTop;
}
function getElementPositionXY(elemID)
{
var offsetTrail = elemID;
var offsetLeft = 24;
var offsetTop =0;
while(offsetTrail)
{
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1 &&
typeof(document.body.leftMargin) != "undefined") {
offsetLeft += document.body.leftMargin;
offsetLeft += document.body.leftMargin;
}
document.getElementById("txt_left").innerText = offsetLeft;
document.getElementById("txt_top").innerText = offsetTop;
document.getElementById("divMsg").style.top = offsetTop + "px";
}
//-->
</script>
鼠标的绝对位置：<br />
<span id="XY" style="color:red;"></span><br /><br />
控件输入框txtPos的绝对位置：<br />
X：<span id="txt_left" style="color:red;"></span><br />
Y：<span id="txt_top" style="color:red;"></span><br />
<input type="text" name="txtPos" id="txtPos" onfocus="getElementPositionXY(this)"/>
<br /><br />
<div id="divMsg" style="height:60px;width:100px;background-color:#cccccc"></div>
</body>
</html>
分享到：
相关推荐
New Document 鼠标的绝对位置： 控件输入框txtPos的绝对位置： X： Y： [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
介绍了关于JavaScript在不同浏览器下取得鼠标绝对位置相关函数用法及兼容性介绍，有需要的同学可参考一下
本文实例为大家分享了javascript实现图片跟随鼠标移动的具体代码，供大家参考，具体内容如下 实现思路 1、给 document 绑定 mousemove 事件，获取鼠标的坐标：e.pageX ，e.pageY 2、将图片设置成绝对定位：...
09:___JavaScript图片滚动（绝对酷） 10:___JavaScript生成弹性透明的图片放大代码 11:___JavaScript由左向右的图片渐变过渡 12:___JavaScript动态控制图片透明度的变化 13:___JavaScript图片放大 14:___JavaScript...
2.7 取得控件的绝对位置 2.8 删除时的确认提 示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页...
1.4 JavaScript及其在Web页面中的位置 3 1.5 Ajax是什么 5 1.6 JavaScript是什么样子的 6 1.7 JavaScript及其在Web开发中承担的角色 7 1.8 JavaScript和事件 9 1.9 标准化JavaScript和W3C 11 1.9.1 ...
2.7 取得控件的绝对位置 2.8 删除时的确认提示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页效果...
//获得控件的绝对位置(2) 12 //最小化,最大化,关闭 12 //光标停在文字最后 12 //页面进入和退出的特效 12 //网页是否被检索 13 //打印分页 14 //设置打印 14 //自带的打印预览 15 //去掉打印时的页眉页脚 16
z=obj.style.zIndex //获取对象的z轴坐标值 //设置对象的z轴坐标值为100，确保当前层显示在最前面 obj.style.zIndex=100 x=event.offsetX //获取鼠标指针位置相对于触发事件的对象的X坐标 y=event.offsetY
• 13.8.htm “绝对位置”定位 • 13.9.htm z-index属性 • 13.10.htm z-index属性之二 • layerlib.js 跨浏览器DHTML库 • 13.12.htm 跨浏览器DHTML库的使用 第14章（\第14章） ...
• 13.8.htm “绝对位置”定位 • 13.9.htm z-index属性 • 13.10.htm z-index属性之二 • layerlib.js 跨浏览器DHTML库 • 13.12.htm 跨浏览器DHTML库的使用 第14章（\第14章） ...
鼠标位置一个超级简单的跨浏览器库，用于获取鼠标事件的正确坐标。 只需将事件 obj 传递给方法，它就会返回您需要的距离（作为数组）。 npm install mouse-pos像这样使用它 var mouse = require("mouse-pos");var el...
拖动是一件非常酷的事情。你点击某个对象，并按住鼠标不放，将鼠标移动到另一个区域，然后释放鼠标按钮将对象放在这里。 下面是一个简单的案例： HTML部分：注意，拖动元素一定要为绝对定义，即... // 获取事件和目标
2、css样式：表盘布局多使用相对定位与绝对定位，将表针与各时刻标刻移动到特定的位置； 3、js行为：为了实现动态获取时间，可以使用var now=new Date()，再利用定时器setInterval，实现每经过1s重新获取当前时间。 ...
取得控件的绝对位置.html 取消选取、防止复制.html 可以在收藏夹中显示出你的图标 .html 各种样式的光标.html 回车键换行.html 在打开的子窗口刷新父窗口的代码里如何写.html 在网页中用按钮来控制前页，后页...
1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 提示文本的隐藏与显示 1.23 实现文字闪烁效果 1.24 实现文字动画...
修复滚动至新图像时未删除覆盖元素的错误1.4-添加选项页面-添加功能排除网站-在扩展程序1.3上悬停鼠标时更改文本-通过单击工具栏1.1中的扩展程序添加打开/关闭功能-更改为绝对位置以避免样式冲突1.0-初始发行版 ...
59. 获取当前绝对路径？ 60. 将HTML文件转换成XML文件? 61. 结合XML和XSL输出HTML页面？ 62. 制作动态树型菜单制作？ 63. 制作类似QQ的短消息提示？ 64. 用jfreechat制作拄、饼、曲线图型? 65. 文本框怎么只容许输入...
观察和评估的数据投影在与鼠标位置相关的覆盖图中。安装将软件包安装为npm软件包。 在dist文件夹中提供了umd格式的文件（需要读取或仅读取了该文件），并在module文件夹中提供了es-module来进行导入。 在两个文件夹...