求拖动图片可相对另外一张图片显示坐标的代码,在线等!详见帖子。

blues7 2004-10-10 10:47:18
如何实现一个可以拖动的图片,拖动时,在x,y的文本框里显示相对于另外一张图片的x、y坐标(不是相对于浏览器),且这个可拖动图片的src是一个文本框的值。
谢谢!
...全文
138 5 打赏 收藏 转发到动态 举报
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 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

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧