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

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

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2004-10-10 10:47
社区公告
暂无公告