吸使用以下几种方式获取:
1PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
2clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化
可是悲剧的是,PageX只有FF特有,IE这个悲剧没有啊T_T,所以大牛们想出了一个办法
PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)
3screenX/screenY:鼠标在屏幕上的位置,从屏幕左上角开始(w3c标准)
4offsetX/offsetY:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值
5
layerX/layerY:FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点
chrome和safari一条龙通杀!完全支持所有属性其中(offsetX和layerX都是以border为参考点)
下面这个是获取相对于屏幕的坐标
documentonmousemove=function(e){e=e e:windowevent;documentwriteln("X:"+escreenX+"Y:"+escreenY);}
根据设置希望的热区坐标。代码如下:
js代码 :更多问题到问题求助专区>
首先你要先搞清你所说的坐标变化不大是相对窗口,屏幕,还是文档的,他们的坐标系是不同的。不知你想要找的是哪一个。
1相对窗口,当然是以浏览器窗口为主了,即浏览器中可见部分(即包含文档部分)的左上角为坐标原点。这是用clientX和clientY获取的。
2相对屏幕,当然是以你的显示器为主了,显示器的左上角为原点,用screenX和screenY可以获取到
3相对文档的,即以文档BODY所显示的左上角为原点,例如当一个DIV的position="absolute"时设left="100px"
top="100px"那么无论你如何变换浏览器,虽然它显示的位置在变但他在文档中的位置是不变的。一般用documentbodyscrollLeft+eventclientX和documentbodyscrollTop+eventclientY来获取
而offsetX解释说是事件产生的位置和鼠标位置的偏移量,没太理解,我也是初学。
而你说改变分辨率坐标改变,这是必然的。因为在不同的分辨率下网页的显示样式不同,这不是坐标改变的主要原因,主要还是因为度量的改变,如:无论屏幕的分辨率怎么改屏幕大小是不变的,但它代表的显示逻辑长度改变了,如1024×768和800×600,同样宽度的屏幕被当成1024个长度单位来用和当成800个长度单位来用当然会不同,当你点击屏幕的中央时前者返回的是1024/2而后者返回的是800/2所以坐标值会改变。就像你用米尺量是1米,用寸尺量是3寸,一个是1,一个是3一样的道理。
JS是不支持截图的
单纯的保存的话,还是可以的,但只是在IE浏览器下,使用ActiveXObject对象来对本地文件进行 *** 作,但对权限的要求十分严格,如果是做本地应用还行,如果做网页,用起来会很麻烦
ActiveXObject中有一个WscriptShell就是对文件系统进行 *** 作的对象,你可以百度一个看看。
稍等上代码!!
<html><head>
<script type="text/javascript">
function show_coords(event){
var x = eventclientX;
var y = eventclientY;
var say = documentall("coords");
sayinnerHTML = "X:"+x+" Y:"+y;
saystyleposition = "absolute";
saystyleleft = x + 30;
saystyletop = y;
}
</script>
</head>
<body onmousemove="show_coords(event)">
<p id="coords"></p>
</body>
<html>
希望我的回答对你有用,有用就采纳!!!谢谢!
以上就是关于js怎么获得鼠标当前坐标全部的内容,包括:js怎么获得鼠标当前坐标、JS动态在图片上 绘制热区 并 记录坐标! 哪位大神会啊、js 获取鼠标坐标的问题等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)