社区
JavaScript
帖子详情
求拖动图片可相对另外一张图片显示坐标的代码,在线等!详见帖子。
blues7
2004-10-10 10:47:18
如何实现一个可以拖动的图片,拖动时,在x,y的文本框里显示相对于另外一张图片的x、y坐标(不是相对于浏览器),且这个可拖动图片的src是一个文本框的值。
谢谢!
...全文
138
5
打赏
收藏
求拖动图片可相对另外一张图片显示坐标的代码,在线等!详见帖子。
如何实现一个可以拖动的图片,拖动时,在x,y的文本框里显示相对于另外一张图片的x、y坐标(不是相对于浏览器),且这个可拖动图片的src是一个文本框的值。 谢谢!
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用AI写文章
5 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
csdntzg
2004-10-10
打赏
举报
回复
<html>
<head>
</head>
<body>
<img src="img/img2.gif" name="img2" width="468" height="205" id="img2">
<div id="Layer1" style="position:absolute; z-index:3" ondragstart="setCapture();xx=event.x-this.offsetLeft;yy=event.y-this.offsetTop;"
ondrag='this.style.left=event.x-xx;this.style.top=event.y-yy'
ondragend="releaseCapture();gogogo(this.style.left,this.style.top)">
<img id=img1>
</div>
<div id="Layer2" style="position:absolute; width:248px; height:104px; z-index:2; left: 60px; top: 229px;">
<p>src:
<input name="imgsrc" type="text" id="xy" value="img/img2.gif">
</p>
<p>x:
<input name="x2" type="text" id="x2">
</p>
<p>y:
<input name="y2" type="text" id="y2">
</p>
</div>
<script>
img1.src=document.all.imgsrc.value;
var x1=img2.offsetLeft;
var y1=img2.offsetTop;
function gogogo(xx,yy){
//var t=xx.parseInt(xx);
document.all.x2.value=parseInt(xx)-x1;
document.all.y2.value=parseInt(yy)-y1;
}
</script>
</body>
</html>
bflovesnow
2004-10-10
打赏
举报
回复
自己查 MSDN 中对象的 offsetLeft/offsetTop 的用法
blues7
2004-10-10
打赏
举报
回复
net_lover(孟子E章) ,我对javascript不熟,你能不能把完整代码帖出来?
麻烦你了!
孟子E章
2004-10-10
打赏
举报
回复
把拖动的图片的相对于浏览器的x,y分别减去相对的那个图片相对于浏览器的x1,y1不就是吗
csdntzg
2004-10-10
打赏
举报
回复
<html>
<head>
</head>
<body>
<img src="img/img2.gif" name="img2" width="468" height="205" id="img2">
<div id=Layer1 style='position:absolute; left: 498px; top: 12px;' onmousedown="MouseDown(this)" onmousemove="MouseMove()" onmouseup="MouseUp();gogogo(this.style.left,this.style.top);">
<img id=img1>
</div>
<div id="Layer2" style="position:absolute; width:248px; height:104px; z-index:2; left: 60px; top: 229px;">
<p>src:
<input name="imgsrc" type="text" id="xy" value="img/img2.gif">
</p>
<p>x:
<input name="x2" type="text" id="x2">
</p>
<p>y:
<input name="y2" type="text" id="y2">
</p>
</div>
<p>
<script>
img1.src=document.all.imgsrc.value;
var Obj
function MouseDown(obj){
Obj=obj
Obj.setCapture()
Obj.l=event.x-Obj.style.pixelLeft
Obj.t=event.y-Obj.style.pixelTop
Obj.style.cursor='crosshair'
}
function MouseMove(){
if(Obj!=null){
Obj.style.left = event.x-Obj.l
Obj.style.top = event.y-Obj.t
}
}
function MouseUp(){
if(Obj!=null){
Obj.releaseCapture()
Obj.style.cursor='default'
Obj=null
}
}
var x1=img2.offsetLeft;
var y1=img2.offsetTop;
function gogogo(xx,yy){
//var t=xx.parseInt(xx);
document.all.x2.value=parseInt(xx)-x1;
document.all.y2.value=parseInt(yy)-y1;
}
</script>
</body>
</html>
iOS 仿游戏操作杆功能,包含OC和swift
代码
. 具体实现
详见
代码
.zip
iOS 仿游戏操作杆功能,包含OC和swift
代码
. 具体实现
详见
代码
基于 three.js 和 jquery 实现 3D 机房的效果,
详见
资源描述
3D 机房设备的 CURD 3D 机房设备的告警 3D 机房机柜位置调整
百度地图 功能模块完整版 开发指南
百度地图iOS SDK v2.10.0 Sample共有23个Demo,每个Demo的说明如下: ------------------------------------------------------------------------------------- 一、 Demo名称:基本地图功能 文件名: MapViewBaseDemoViewController.mm 简介:创建
一张
百度地图并管理地图的生命周期 详述: (1)创建
一张
最简单的百度地图; (2)管理地图的生命周期,具体请参看
代码
部分的相关注释; ------------------------------------------------------------------------------------- 二、 Demo名称:多地图展示功能 文件名: MultiMapViewDemo.mm 简介:在一个页面中创建多个地图 详述: (1)在一个页面内创建多个相互独立的地图 (2)地图Logo位置变更,支持6个位置 ------------------------------------------------------------------------------------- 三、 Demo名称:图层展示功能 文件名: MapViewDemoViewController.mm 简介:展示普通图、卫星图、路况图和路况卫星图 详述: (1)详情请参考
代码
部分或官网开发指南相关章节; ------------------------------------------------------------------------------------- 四、 Demo名称:地图操作功能 文件名: MapViewControlDemoViewController.mm 简介:介绍平移和缩放地图,双指操作地图,监听地图点击事件 详述: (1)介绍地图缩放级别、旋转度和俯视度的get和set方法; (2)监听单击、双击和长按地图事件; (3)单击、双击或长按地图获取该点的经纬度
坐标
; (4)对地图
显示
内容进行截图; ------------------------------------------------------------------------------------- 五、 Demo名称:UI控制功能 文件名: MapViewUISettingDemoViewController.mm 简介:介绍开关手势功能和
显示
隐藏UI控件 详述: (1)地图操作开关:平移、缩放; (2)控件
显示
开关:
显示
/隐藏比例尺控件; (3)指南针位置控制:
显示
在地图左上角或者右上角(仅举例),开发者可据实际情况任意改变位置; (4)禁用所有手势:控制是否一并禁止所有手势。 (5)设置边界区域:给地图增加边界。地图可操作区域和控件
显示
,都被限制在地图设定的边界内; (6)您还可以参照开发文档控制比例尺的
显示
位置; ------------------------------------------------------------------------------------- 六、 Demo名称:定位功能 文件名: LocationDemoViewController.mm 简介:介绍定位图层的基本用法 详述: (1)介绍如何开始定位和停止定位; (2)默认定位的状态
显示
为普通态,v2.0.2版本开始提供定位的跟随态和罗盘态; (3)开发者可以自己修改icon_center_point.png和icon_center_point@2x.png资源修改默认的定位图标; (4)支持开发者自行定义精度圈边框和填充区域的颜色。 ------------------------------------------------------------------------------------- 七、 Demo名称:覆盖物功能 文件名: AnnotationDemoViewController.mm 简介:介绍使用SDK内置方法绘制点线面等几何图形和如何添加标注 详述: (1)内置覆盖物标签: a、使用内置方法绘制几何图形; b、通过BMKMapView的addOverlay接口添加一个覆盖物; c、开发者可以实现BMKMapViewDelegate中mapView:viewForOverlay;接口,提供要添加到地图中的 标注的BMKOverlayView,开发者可以扩展此类丰富更多的功 (2)添加标注标签: a、给标注添加落下的动画效果,点击标注可弹出对话框,还可以拖拽标注; b、通过BMKMapView的addAn
DevC++ easyx实现
图片
拖动
,一种悬浮窗实现原理与完整
代码
然后实际上是img2读取完黑色,
图片
就存起来了,原来地方的
图片
就可以不用了,就在img2执行完加上一块画矩形的
代码
,然后再增加参数,限制只使用一次,以后都不用了。而这个群体的概念就是结构体,而这些参数可以再次包装,一个函数传入一个结构体,这个结构体包含被
拖动
图片
的全部信息,这样就能实现多个
图片
拖动
。其实这说明实现
拖动
功能的函数控制变量的不安全性,函数结束,时,控制变量不一定复位。这是第一代运行的版本,
代码
方面的别扭就是未来开发,移植函数的时候不好移植,因为画点的函数putpixel()也在这个
拖动
函数里。
关于
坐标
转换!重要!(转)
坐标
转换:http://cnodejs.org/topic/564c0a27e4766d487f6fe38d 转自:http://www.cnblogs.com/milkmap/p/3627940.html 所有
坐标
的原点都是非洲 1、 经纬度。这个是球面
坐标
,对于北京来说,就是(116.388171,39.935961)这样的
坐标
。比如腾讯、高德、百度都是这样的经纬度
坐标
。谷歌是经...
JavaScript
87,997
社区成员
224,709
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章