页面JS方法获取图片中的相对坐标

一、页面运行，点击图片中的某个点，弹窗提示这个点在图片中的坐标信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片相对坐标</title></head>
<body><div style="position:absolute;top:50px;left:250px;">
<img src="G:\123.png" onmousemove="vControl('GETMOUSEPOSINPIC',this)" onclick="haha('GETMOUSEPOSINPIC',this)"/>
</div>
<script language="javascript" type="text/javascript">
var JPos = {};
(function($){
$.$getAbsPos = function(p){var _x = 0;var _y = 0;while(p.offsetParent){_x += p.offsetLeft;_y += p.offsetTop;p = p.offsetParent;}_x += p.offsetLeft;_y += p.offsetTop;return {x:_x,y:_y};};$.$getMousePos = function(evt){var _x,_y;evt = evt || window.event;if (evt.pageX || evt.pageY){_x = evt.pageX;_y = evt.pageY;}else if (evt.clientX || evt.clientY){_x = evt.clientX + document.body.scrollLeft - document.body.clientLeft;_y = evt.clientY + document.body.scrollTop - document.body.clientTop;}else{return $.$getAbsPos(evt.target); }return {x:_x,y:_y};}
})(JPos);
function vControl(pChoice)
{switch(pChoice){case "GETMOUSEPOSINPIC":var mPos = JPos.$getMousePos();var iPos = JPos.$getAbsPos(arguments[1]);window.status = (mPos.x - iPos.x) + " " + (mPos.y - iPos.y);break;}
}function haha(pChoice)
{switch(pChoice){case "GETMOUSEPOSINPIC":var mPos = JPos.$getMousePos();var iPos = JPos.$getAbsPos(arguments[1]);alert((mPos.x - iPos.x) + " " + (mPos.y - iPos.y));break;}
}
</script>
</body>
</html>

二、实时获取坐标位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片相对坐标</title></head>
<body>
<script type="text/javascript">var getCoordInDocumentExample = function(){var coords = document.getElementById("coords");coords.onmousemove = function(e){var pointer = getCoordInDocument(e);var coord = document.getElementById("coord");coord.innerHTML = "X,Y=("+pointer.x+", "+pointer.y+")";}}var getCoordInDocument = function(e) {e = e || window.event;var x = e.pageX || (e.clientX +(document.documentElement.scrollLeft|| document.body.scrollLeft));var y= e.pageY || (e.clientY +(document.documentElement.scrollTop|| document.body.scrollTop));return {'x':x,'y':y};}window.onload = function(){getCoordInDocumentExample();};
</script>
<div id="coords" style="width:500px;height:200px;background:#F2F1D7;border:2px solid #0066cc;">
请在此移动鼠标。
</div>
<br />
<div id="coord" style="width:500px;border:2px solid #336699;">&nbsp;</div>
</body>
</html>

页面JS方法获取图片中的相对坐标相关推荐

Android WebView 调用JS方法获取返回值
一.Android4.4+ 如果你项目的minSdkVersion 为4.4 以上,那么你可以直接通过WebView的evaluateJavascript()方法拿到JS方法的返回值 webview ...
html如何添加子页面,html5 父页面调用子页面js方法
父页面代码: var randid=result.rows.item(0)['id']; plus.webview.close("test_order_detail");//创建之 ...
js方法获取32位UUID
获取ID方法 // 获取UUID function getUUID (n = 32) {var str = "abcdefghijklmnopqrstuvwxyz0123456789&quo ...
iframe调用父页面js方法_JS高级技巧
本篇是看的<JS高级程序设计>第23章<高级技巧>做的读书分享.本篇按照书里的思路根据自己的理解和经验,进行扩展延伸,同时指出书里的一些问题.将会讨论安全的类型检测.惰性载入函 ...
微信小程序 app.js 操作页面js方法
由于在全局app.js监听蓝牙返回数据,所以在app.js页面调用当前页面方法来改变页面显示状态:
js方法获取本机IP
记录一次工作中需求获取本机IP getUserIP(onNewIP) {// onNewIp - your listener function for new IPs//compatibility ...
调用父页面的元素或js方法
获取父页面js方法: window.parent.xxxxx(); 用jquery获取父页面元素: $("#xxxid",window.parent.document); 转载于: ...
子页面调用父页面的js方法或参数（iframe.contentWindow）
子页面调用父页面的js方法或参数子页面调用父页面的参数父页面调用子页面的参数或方法相关链接子页面调用父页面的参数 window.parent.aa();//调取aa函数 window.pare ...
java中如何设置浏览器宽度_[Java教程]关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)_星空网...
关于JS中获取浏览器高度和宽度值的多种方法(多浏览器) 2017-08-07 0 三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 d ...

页面JS方法获取图片中的相对坐标

页面JS方法获取图片中的相对坐标相关推荐

最新文章

热门文章