js获取图片点坐标值

最新推荐文章于 2024-06-24 14:03:35 发布
最新推荐文章于 2024-06-24 14:03:35 发布
阅读量1.5w 收藏 5
点赞数 1
分类专栏： JavaScript+html+css 文章标签： function xhtml javascript html 测试 div

js获取图片点坐标值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
</head>

<body bgcolor="#999999">
<div style="position:absolute;top:0px;left:0px;"><img src="Winter.jpg"  οnmοusemοve="vControl('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;
	}
}
</script>
</body>
</html>


 

lzs109
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
js点击获取—通过JS获取图片的相对坐标位置
a97156000的博客
11-17 3090
一、通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示： 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>通过JS获取图片的相对坐标位置</title&g...
js获取图片的坐标
热门推荐
weixin_39309867的博客
07-02 1万+
废话不多说，上代码 &lt;img src="toImage.action" name="npcImg" id="npcImg" width="512" height="512" onclick="vControl('GETMOUSEPOSINPIC',this)"/&gt; 下面是javascript部分//点击图片 ， 获取图片上对应的坐标,这个坐标y轴是反着的，应该是
js鼠标点击添加图标并获取图标的坐标值
weixin_51609337的博客
10-20 1513
给这个图片添加摄像头图标，并获取图标的坐标值，也就是图标的css样式是positon:absolute,获取left和top的值。6.应该让鼠标点击处是图标的中心，就需要获取图标中心的坐标，然后 减去图片2中箭头的距离。3.就能获取到图片2中箭头的距离，即鼠标点击的位置距背景图顶部的距离。1.鼠标点击时距浏览器的左边距离和上边距离，相当于(0,0)坐标。5.效果如下图，但是鼠标点击处是图标的左上角，感觉好像是差一点。4.计算得出图标的left和top值，这里是%。思路是这样的，获取这里的长度，
用JavaScript实现了一个简单的图像坐标点标注工具
最新发布
marsjin的专栏
06-24 390
代码中还包含了创建右键菜单的功能，但相关的菜单项（清空画布和复制坐标）被注释掉了。如果想启用这些功能，只需取消注释相应的代码行即可。这段代码实现了一个简单的图像标注工具，允许用户在加载的图像上进行点选标注，并且通过右键确认一个点序列来形成一个多边形。自己动手实现业务代码，这只是代码片段，具体实现还需要根据业务需要做相应的更改；
js 动态设置图片的热区并获取图片坐标
04-25
js 动态设置图片的热区并获取图片坐标 浏览器 均兼容 你懂的
js点击获取—通过JS获取图片的绝对对坐标位置
a97156000的博客
11-17 1637
一、通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="te...
javaScript获得鼠标点击图片处的坐标
起點ing 的专栏
04-18 1292
无标题页       function mousePosition(ev){      if(ev.pageX || ev.pageY){       return {x:ev.pageX, y:ev.pageY};       }       return {        x:ev.clientX + document.body.scrollLeft - documen
JS网页在线获取鼠标坐标值的方法
12-12
本文实例讲述了JS网页在线获取鼠标坐标值的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:<html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /&...
获取图像中鼠标的坐标值
11-14
5. **JavaScript**: 在Web开发中，你可以使用`event.clientX`和`event.clientY`属性来获取鼠标在HTML元素上的相对坐标。如果需要屏幕坐标，可以使用`window.pageXOffset`和`window.pageYOffset`调整。 6. **Qt**: ...
获取图片或者div上的点坐标
02-21
本文将深入探讨如何实现这一功能，并结合“getpoint.js”这个文件名，推测这是一个用于获取坐标值的JavaScript脚本。 首先，我们需要了解HTML中的`<img>`标签和`<area>`标签。`<img>`标签用于展示图像，而`<area>`...
JavaScript检测鼠标移动方向的方法
10-24
通过不断地获取这些坐标值，我们可以计算出鼠标的移动方向。 在实现鼠标移动方向的检测时，需要特别注意的一点是，当鼠标不移动时，我们要将`curX`和`curY`的值设为`stage.mouseX`或`e.clientX`、`e.clientY`，这样...
获取图片或者div上的点坐标--带例子
06-03
连续获取目标对象上的点坐标。 我拿这个来做图片地图描边，因为那个需要很多点（x,y）,把这些点连接起来，组成一个不规则图形。应广大网友要求，附上例子，希望能帮助到大家
点击图片任意一点显示所点击的坐标
07-14
点击图片的任意一点获得坐标，并在窗口中将所点击的点的坐标显示出来 -Click the picture to obtain the coordinates of any point and click in the window by the coordinates of the points displayed
原生态JS 3D banner.rar
03-21
在这个3D banner中，JavaScript负责监听鼠标的移动事件，获取鼠标的坐标值。然后，它会根据这些坐标来调整3D元素的位置、旋转角度或其他相关属性，以模拟出3D空间中的动态变化。这通常涉及到数学，尤其是向量和矩阵...
JS实现星星海特效
10-15
为了使星星在屏幕上随机分布，我们需要获取屏幕的宽度和高度，然后使用`random`函数生成随机坐标值，将星星放置在屏幕上的不同位置。 为了增加星星海特效的立体感，我们可以使用CSS中的`transform`属性来实现缩放和...
Jcrop&JQ鼠标放上图片放大效果
07-11
2. **坐标选择**：`Jcrop`能够记录用户选择的矩形区域的坐标，并提供API供开发者获取这些坐标值，以便进一步处理，如保存裁剪后的图片。 3. **比例限制**：开发者可以设置裁剪区域的比例限制，确保用户裁剪出的图片...
js坐标位置详解 及获取（ie ff）
e度空间
06-10 232
function    getAbsPoint(e)   {        var    x    =    e.offsetLeft,    y    =    e.offsetTop;        while(e=e.offsetParent)      {         x    +=    e.offsetLeft;           y    +=    e.offset...
页面JS方法获取图片中的相对坐标
aliaichidantong的博客
05-29 2487
一、页面运行，点击图片中的某个点，弹窗提示这个点在图片中的坐标信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片相对坐标</title> </head> <body> <div style="position:absolute;top:50px;left:250
JS:根据点击图片坐标，截取点击位置部分图片
PhilipJ0303的博客
12-28 1462
【代码】JS:根据点击图片坐标，截取点击位置部分图片。
Android系统如何获取设备GPS坐标值
09-18
在Android系统中，可以通过使用LocationManager类和LocationListener接口来获取设备的GPS坐标值。 首先，需要在Manifest文件中声明访问设备位置的权限： ``` <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> ``` 然后，在代码中获取LocationManager实例，并通过该实例注册LocationListener： ``` LocationManager locationManager = (LocationManager) getSystemService(Context.LOCATION_SERVICE); LocationListener locationListener = new LocationListener() { @Override public void onLocationChanged(Location location) { double latitude = location.getLatitude(); double longitude = location.getLongitude(); // Do something with the location data } //... other required methods for LocationListener }; locationManager.requestLocationUpdates(LocationManager.GPS_PROVIDER, 0, 0, locationListener); ``` 当GPS坐标发生变化时，LocationListener的onLocationChanged方法就会被调用，在该方法中即可获取最新的经纬度坐标值。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值