社区
JavaScript
帖子详情
求拖动图片可相对另外一张图片显示坐标的代码,在线等!详见帖子。
blues7
2004-10-10 10:47:18
如何实现一个可以拖动的图片,拖动时,在x,y的文本框里显示相对于另外一张图片的x、y坐标(不是相对于浏览器),且这个可拖动图片的src是一个文本框的值。
谢谢!
...全文
137
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
当用户触摸并
拖动
指针时,游戏杆会记录指针的
相对
位置,从而可以用来控制游戏对象的方向和速度。 在Objective-C中,我们可以创建一个自定义的UIControl子类来实现这个功能。首先,我们需要在Xcode中创建一个新的...
基于 three.js 和 jquery 实现 3D 机房的效果,
详见
资源描述
当设备出现故障或达到预设阈值时,可以通过改变设备颜色、
显示
警告图标或弹出通知的方式来提醒用户。这可能需要与后台系统进行数据交互,获取实时的设备状态信息。 4. **3D机房机柜位置调整**: 在3D环境中,用户...
百度地图 功能模块完整版 开发指南
a、
图片
图层可随地图的平移、缩放、旋转等操作做相应的变换; b、
图片
图层是一种特殊的Overlay, 它位于底图和底图标注层之间(即
图片
图层不会遮挡地图标注信息); c、
图片
图层的添加顺序不会影响其他图层(例如:...
DevC++ easyx实现
图片
拖动
,一种悬浮窗实现原理与完整
代码
然后实际上是img2读取完黑色,
图片
就存起来了,原来地方的
图片
就可以不用了,就在img2执行完加上一块画矩形的
代码
,然后再增加参数,限制只使用一次,以后都不用了。而这个群体的概念就是结构体,而这些参数可以再次...
关于
坐标
转换!重要!(转)
坐标
转换:http://cnodejs.org/topic/564c0a27e4766d487f6fe38d ...这个是球面
坐标
,对于北京来说,就是(116.388171,39.935961)这样的
坐标
。比如腾讯、高德、百度都是这样的经纬度
坐标
。谷歌是经...
JavaScript
87,997
社区成员
224,709
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章