社区
JavaScript
帖子详情
求拖动图片可相对另外一张图片显示坐标的代码,在线等!详见帖子。
blues7
2004-10-10 10:47:18
如何实现一个可以拖动的图片,拖动时,在x,y的文本框里显示相对于另外一张图片的x、y坐标(不是相对于浏览器),且这个可拖动图片的src是一个文本框的值。
谢谢!
...全文
121
5
打赏
收藏
求拖动图片可相对另外一张图片显示坐标的代码,在线等!详见帖子。
如何实现一个可以拖动的图片,拖动时,在x,y的文本框里显示相对于另外一张图片的x、y坐标(不是相对于浏览器),且这个可拖动图片的src是一个文本框的值。 谢谢!
复制链接
扫一扫
分享
举报
写回复
配置赞助广告
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>
相关推荐
C#可
拖动
控件的演示实例
摘要:C#源码,控件类库,
拖动
控件 可
拖动
的C#窗体控件演示源码,
显示
坐标
的按钮是可以
拖动
的,以前也发过几次可
拖动
控件的源码,不过是
拖动
一个装载了
图片
的容器,大致的原理是相同的,学习C#的初学者朋友就下载参考吧。
[javascript]9宫格拖拽拼图游戏 puzzle
1.跨浏览器,主流浏览器都可以运行2.纯javascript开发。3.配置实用方便。4.二次开发简单,易用。传送门
在线
试玩成品预览,见附近 用
一张
图片
用
坐标
的方式生成拼图单元格,类似css sprite。大致思路是,每个单元格有对应的两个索引,由数据驱动
显示
。创建实例时吧0-9乱序排列,每个单元格对应两个索引,一个是真实所在位置的索引,一个是记录现在位置的索引。
拖动
图片
的时调整记录现在位置的索...
wine
1,夜光的功能 2,设置头像的功能 3,调整距离的功能, 坑: 1,
坐标
的
相对
位置 2,总的 弧度数 3,gesture 位置设置为 0 4,beginpoint ,endpoint的
相对
象限, 拼图的应用,随便
一张
图片
,时间,步数,哈哈, 转载于:https://www.cnblogs.com/guligei/p/3602391.html...
WKWebView获取H5页面里
图片
地址以及
图片
相对
视图窗口的
坐标
的方法
WKWebView获取H5页面里
图片
地址以及
图片
相对
视图窗口的
坐标
的方法 最近有个需
求
是点击放大查看H5内容页面的
图片
,寻找到一个比较轻量的库YHPhotoBrowser,其中根据
图片
位置来缩放的动画需要传递一个
图片
所在屏幕里的位置CGRect,想获取H5的
图片
坐标
那就需要JS注入了 - (void)handleSingleTap:(UITapGestureRecognizer *)reco...
js原生实现放大镜
放大镜的特点 1,放大镜是一个可
拖动
div, 2,只能在父元素中
拖动
,不能越界; 3,
显示
器根据放大镜的移动
显示
相应区域的内容, 实现的思路 1,脱离文档流的元素才能
拖动
,子元素要
相对
父元素设置绝对定位; 2,
显示
器里面其实已经有
一张
图片
了,这张
图片
和和需要查看的
图片
一模一样,不过设置的大小不同,这里设置的比例是6.25倍;放大镜的大小对应
显示
器的大小,放大镜里的内容和
显示
器里的内容是一样;等比放大; 3,当移动放大镜的时候,重新设置
显示
器里面
图片
的位置,方向是负的,
代码
<style>
发帖
JavaScript
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
8.7w+
社区成员
22.4w+
社区内容
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
帖子事件
创建了帖子
2004-10-10 10:47
社区公告
暂无公告