现在很多网站分析系统均要获取鼠标坐标跟轨迹来绘制云图跟鼠标轨迹,这就 要求鼠标坐标必须要准确才行。但要准确却有一定困难。
如上图:
用户打开百度首页,在不同的浏览器大小下点击“网站”字体,的坐标完全不一致。坐标不准确,云图,热点图何来准确?
对于普通一个网站有3个不确定性:
1. 是否固定宽度
2. 是否靠左,靠右,居中
3. 是否自适应大小
这3个不确定性由于无法通过js获取,所以必须通过网站告知js此三个参数具体值。
目标:不管浏览器窗口大小如何,对应鼠标的点击坐标均与浏览器最大化时对应的坐标值完全一致。
坐标偏移一般不考虑Y轴坐标,所以代码只针对于X轴的考虑
<script language="javascript" type="text/javascript">
var width =800; //固定宽度
var align "center"; //靠左,居中,靠右
var auto =false; //自适应大小
function getMousePoint(event) {
var px, py;
var bodyWidth =getDocWidth();
var screenHeight =window.screen.height; //屏幕分辨率的高
var screenWidth =window.screen.width; //屏幕分辨率的宽
//ie的兼容性,为了用于onmousemove事件
if(!event) {
event = window.event;
}
if(document.all) { // is ie
px = event.clientX;
py = event.clientY;
px += document.documentElement.scrollLeft;
py += document.documentElement.scrollTop;
} else {
px = event.pageX;
py = event.pageY;
}
var maxScreenX = 0 ;
var nowScreenX = 0 ;
if(align == "right") {
nowScreenX = bodyWidth - width ;
maxScreenX = screenWidth - width ;
}
else if(align == "left") {
nowScreenX = 0 ;
maxScreenX = 0 ;
}
else { //default : center
nowScreenX = (bodyWidth - width)/2 ;
maxScreenX = (screenWidth - width) /2 ;
}
//必须非自适应
if(!auto && maxScreenX != nowScreenX){
px = px - Math.abs(nowScreenX) + maxScreenX;
}
alert(px+"___" + py);
return { x: px, y: py };
}
function getDocWidth(){return(document.documentElement
&&document.documentElement.scrollWidth)
||(document.body&&document.body.scrollWidth)||0}
//测试代码,纯粹用于测试
document.body.onclick = function(event) {
var pos = getMousePoint(event);
var xPos = pos.x;
var yPos = pos.y;
}</script>
稍微优化后实际上只要2个参数即可。
如width=0的时候,就说明自适应?呵
对于自适应大小的网站(如用table标签,width=100%)这种,没必要做换算,因为无法获取精确值
此鼠标获取的方法适用于主流网站系统,如163,qq,cntv,sina,baidu,不去考虑其他界面设计得很别扭网站
将上述代码直接复制到html的</body>之前即可看效果
分享到:
相关推荐
获取鼠标的坐标,通过js任意获取鼠标点击处的位置坐标。
本文实例讲述了javascript获取当前鼠标坐标的方法。分享给大家供大家参考。具体实现方法如下: 对于javascript获取当前鼠标坐标来说,得对不同浏览器的坐标位置有所了解。具体代码如下: 代码如下:<html> <...
javascript获取鼠标当前位置坐标,并显示出来
描述javascript获取鼠标坐标的各种方式,其中有图说明,很清晰,很容易理解!
javascriptjs获取鼠标点击时的坐标位置 只想帮你度过这个问题 加油你也行的
pdf关键字坐标获取
ArcGIS API For JavaScript 4.x 获取地图经纬度坐标(附完整代码,即开即用)
使用JavaScript获取客户端的鼠标坐标信息
页面JS光标/鼠标坐标,百度统计中有个热点统计图,我们要做的就是获取光标的像素坐标
JavaScript offset实现鼠标坐标获取和窗口内模块拖动 offset 即偏移量,使用 offset 系列相关属性可以 动态的 获取该元素的位置(偏移)、大小等,如: 元素距离带有定位父元素的位置 获取元素自身的大小(宽度...
本篇文章主要介绍了Three.js获取鼠标点击的三维坐标示例代码。具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
JS获取鼠标坐标,获取鼠标...JavaScript获取鼠标坐标 .tip { width:200px; border:2px solid #ddd; padding:8px; background:#f1f1f1; color:#666; } 源码爱好者 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
canvas例子,如何获取鼠标在canvas中的位置。html+js。下载双击即可在浏览器运行,F12可查看源代码。
主要介绍了JS获取鼠标坐标位置的方法,结合实例形式分析了JavaScript常见的获取鼠标页面、屏幕等坐标位置的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
主要介绍了js使用onmousemove和onmouseout获取鼠标坐标的方法,涉及javascript操作鼠标事件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本篇文章,小编将为大家介绍基于JavaScript实现 获取鼠标点击位置坐标的方法。有需要的朋友可以参考一下
个体实现内容: 1、当需求为获得的坐标值相对于body时实现方法 2、当需求为获得的坐标值相对于某一对象时实现方法
范例使用SuperMap iClient 6R for JavaScript开发模式,使用MousePosition控件实现鼠标移动到地图上展示实际的地理坐标。