jQuery 如何在jQuery中获取图像的当前位置?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/885144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get current position of an image in jQuery?
提问by Devyn
I've been developing a image manipulation script which has a background and user can upload one or more images onto that background. I want users to be able to drag and move around the BG and finally they can generate final image. However, I have no idea how to get the position of draggable image position on BG. I've been searching around the Internet and ebooks but no clue. Please show me some way and I'll be waiting for your precious replies.
我一直在开发一个具有背景的图像处理脚本,用户可以将一个或多个图像上传到该背景上。我希望用户能够在 BG 周围拖动和移动,最后他们可以生成最终图像。但是,我不知道如何在 BG 上获取可拖动图像位置的位置。我一直在互联网和电子书上搜索,但没有任何线索。请告诉我一些方法,我将等待您的宝贵答复。
回答by Gumbo
Take a look at position()
:
看看position()
:
var pos = $("#myimage").position(); // returns an object with the attribute top and left
pos.top; // top offset position
pos.left; // left offset position
回答by jrharshath
You've said two things:
你说了两件事:
- you want to keep the image in the background
- you want to be able to adjust its position in the parent element.
- 您想将图像保留在背景中
- 您希望能够调整其在父元素中的位置。
So you should set the image as the "background-image" of the parent div, with "background-repeat:no-repeat".
因此,您应该将图像设置为父 div 的“背景图像”,使用“背景重复:无重复”。
The position of the image can be controlled by the "background-position" property.
图片的位置可以通过“background-position”属性来控制。
Of course, there can be alternate implementations using an in the parent div, and using clever interplay of "position:absolute" and "position:relative", but I've seen that repositioning of images is smoother if the image is a background, rather that the image be present as an .
当然,可以有使用父 div 中的替代实现,并使用“位置:绝对”和“位置:相对”的巧妙相互作用,但我已经看到如果图像是背景,图像的重新定位会更平滑,而是将图像作为 .
Hope that helps.
希望有帮助。
cheers, jrh
干杯,jrh