社区
JavaScript
帖子详情
求拖动图片可相对另外一张图片显示坐标的代码,在线等!详见帖子。
blues7
2004-10-10 10:47:18
如何实现一个可以拖动的图片,拖动时,在x,y的文本框里显示相对于另外一张图片的x、y坐标(不是相对于浏览器),且这个可拖动图片的src是一个文本框的值。
谢谢!
...全文
132
5
打赏
收藏
求拖动图片可相对另外一张图片显示坐标的代码,在线等!详见帖子。
如何实现一个可以拖动的图片,拖动时,在x,y的文本框里显示相对于另外一张图片的x、y坐标(不是相对于浏览器),且这个可拖动图片的src是一个文本框的值。 谢谢!
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用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>
百度地图 功能模块完整版 开发指南
a、
图片
图层可随地图的平移、缩放、旋转等操作做相应的变换; b、
图片
图层是一种特殊的Overlay, 它位于底图和底图标注层之间(即
图片
图层不会遮挡地图标注信息); c、
图片
图层的添加顺序不会影响其他图层(例如:...
关于
坐标
转换!重要!(转)
坐标
转换:http://cnodejs.org/topic/564c0a27e4766d487f6fe38d ...这个是球面
坐标
,对于北京来说,就是(116.388171,39.935961)这样的
坐标
。比如腾讯、高德、百度都是这样的经纬度
坐标
。谷歌是经...
【guiplan2.0教程】可视化布局一键生成web前端
代码
支持可视化数据指令事件等一键绑定, 支持实时预览实时更新, 支持可视化交互测试修改之后直接点击预览页面即可测试, 支持一键生成
代码
html,css,js
图片
等 支持一键保存文件无论是静态html页面还是动态vue文件都能...
DevC++ easyx实现
图片
拖动
,一种悬浮窗实现原理与完整
代码
然后实际上是img2读取完黑色,
图片
就存起来了,原来地方的
图片
就可以不用了,就在img2执行完加上一块画矩形的
代码
,然后再增加参数,限制只使用一次,以后都不用了。而这个群体的概念就是结构体,而这些参数可以再次...
高德地图,百度地图等
坐标
体系,
坐标
转换
为什么我的
坐标
,在地图上
显示
会有偏移?本文详细解答以上问题。最后给出
坐标
拾取工具。原文地址:http://segmentfault.com/a/1190000000498434一、
坐标
体系 首先我们要明白,开发者能接触到哪些
坐标
体系呢? 第一种...
JavaScript
87,910
社区成员
224,616
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章