js获取鼠标坐标实例

js获取鼠标坐标实例,关键代码如下:

1.js 代码

/*显示坐标*/
	function showTip(obj){
		//if(!$.trim($(obj).html()))
		//	return false;

		var event=window.event;
		var element=event.srcElement;
		//var X = $(obj).position().top;
		//var Y = $(obj).position().left;
		//alert(X+","+Y);
		var X = $(obj).offset().top;
		var Y = $(obj).offset().left;

		var e = event || window.event;
		var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
		var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
		var px = e.pageX || e.clientX + scrollX;
		var py = e.pageY || e.clientY + scrollY;

		$(‘#tipDiv‘).css("top",X+15+scrollY);
		$(‘#tipDiv‘).css("left",Y+10+scrollX);
		$(‘#tipDiv‘).css("width",$(obj).width()+10);
		//X:710 850 Y:430 560
		//var xValue=parseInt(px);
		//var yValue=parseInt(py);

	        $(‘#tipDiv‘).html("x:"+px+" y:"+py);
	        
		$(‘#tipDiv‘).show();
	}

	/*隐藏坐标*/
	function hideTip(obj){
		$(‘#tipDiv‘).hide();
	}

2.body关键代码

<img class="center-block" src="../../images/map/12345.png" alt="地图" style="height: 640px;" onmousemove="showTip(this)" onmouseout="hideTip(this)" onclick="showCityInfo()">

3.div代码(用于显示坐标)

<div id="tipDiv" style="position: absolute;display:none;text-align:left; border: 1px solid green;z-index: 10000;width:100px;color: red;background-color: #FFF"></div>
时间: 2025-01-01 13:11:33

js获取鼠标坐标实例的相关文章

原生js获取鼠标坐标方法全面讲解-zmq

原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:event.clientX/Yevent.pageX/Yevent.offsetX/Yevent.layerX/Yevent.screenX/Y 二.分别讲解如下: clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 page

原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

简介 关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种: event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变 兼容性:除IE6/7/8不支持外,其余浏览器均支持

js获取鼠标坐标位置兼容多个浏览器

这个看似简单的获取坐标功能,可是已经花费我一天时间了,白天一直搜索js获取坐标,找了很多很多,一一检验,结果出现不兼容.真的够烦躁了,但是事情还是要继续,要完成,回来又继续实践,搜索,反复操作,发现自己好多不会呀,特别是jquery自定义方法(函数),根本就不会,很欠缺基础,心里暗暗下决心,弄完这个好好学习一下js,不然老是卡在这方面.时间虽然已经过去很久了,但我还是没有放弃,想想换个关键词搜索一下,是不是可以找到我想要的.搜索“js获取坐标兼容ie8”,一下子出现后几条,于是挑选一个实践,改造

js 获取鼠标坐标

var x=...; var y=...; return {'x':x,'y':y}; div.x=...;div.y=...; 哈哈,原来是赋值.所以一个数值变量不能当属性?????好像可以吧. page.x--相对整个页面的坐标 client.x--相对可视区域的坐标 scrollLeft--滚动条水平位置坐标 document.documentElement--访问html根节点 window.addEventListener('load',function(){})==window.lo

js获取鼠标移动坐标

js获取鼠标移动坐标,很多情况下还需要考虑document.documentElement.scrollLeft . document.documentElement.clientLeft; var _touchstart, _touchend,_touchmove; var isPC=window.ontouchstart===undefined; if(isPC){ _touchstart="mousedown"; _touchmove="mousemove";

JS 获取鼠标当前坐标 兼容IE

最近在弄一个小功能 鼠标移动到当前位置 就在旁边提示我想提示的内容 所以直接拿过来 直接获取移动鼠标的坐标 然后直接在body中直接绘制一块提示的区域内容 function A(e) { var x,y; //获取鼠标坐标 x=e.pageX,y=e.pageY; //绘制提示内容 $('body').append("<div style='position: absolute; top: ' + y + 'px; left: ' + x+ 'px;'>xxxxxx!</div

获取鼠标坐标的动画

获取鼠标的坐标有e.pagX和e.pagY,这是获取他们的x,和y轴的值,在火狐和其他浏览器中都是用e来获取参数的,但IE8中是用window.event来获取参数的,它不支持e.pagX和e.pagY,在IE8中的pageX = clientX + 页面滚动出去的距离,这里就有个兼容问题,其实兼容问题,只要大概了解就行,会基本知道它封装的函数是什么原理,最主要还要会具体用在实例中. 那具体怎么用呢?一般在页面中有些窗口我们鼠标点上去可以拖着自由运动,还有滚动条啊,还有图片放大部分区域,都会用到

用VBS控制鼠标(获取鼠标坐标、鼠标移动、鼠标单击、鼠标双击、鼠标右击)

Demon's Blog 忘记了,喜欢一个人的感觉 Demon's Blog  ?  程序设计  ?  用VBS控制鼠标(获取鼠标坐标.鼠标移动.鼠标单击.鼠标双击.鼠标右击) ? bbPress积分插件--Virtual Money VBS调用WMI监视注册表变动 ? 用VBS控制鼠标(获取鼠标坐标.鼠标移动.鼠标单击.鼠标双击.鼠标右击) 标题: 用VBS控制鼠标(获取鼠标坐标.鼠标移动.鼠标单击.鼠标双击.鼠标右击)作者: Demon链接: http://demon.tw/programm

JavaScript-4.6鼠标事件监听,获取鼠标坐标window.event---ShinePans

<html> <head> <meta http-equiv="content-type" content="text/html" charset=GB2312"/> <title> 4.5 window.event应用 </title> <script> function body_onclick(){ alert("鼠标点击的坐标是\r\nx:"+event.x