如何在浏览器中找到元素的当前位置？

Question

我想知道如何在浏览器中找到元素的当前位置。我正在尝试创建一个jQuery滑块。通过先设置边距动画创建了滑块。但这种情况有点复杂。它有两个导航。将从一个页面滑动到另一个页面的一个。一页有四个缩略图。使用底部导航，您只能滑动一个缩略图。请参考下图。

我之前通过设置边距动画来获得此效果。但它不是很有效，并且有很多错误。所以我想我宁愿再从头开始。

现在我打算做的是：

1. 使用箭头导航，为边距设置动画并转到下一张幻灯片。
2. 使用分页，找出缩略图的当前位置和动画边距等于文章+ gutter的宽度。

是否可以使用jQuery偏移量来完成？请以正确的方式建议我。任何示例代码示例都将受到高度赞赏。

提前致谢。

编辑：

我实际上完成了滑块。它正如我想要的那样完美地工作。我会在几天后回答这个问题。此外，当网站完成后，我将分享链接，以便其他人可以看到它的实际效果。 ：）

Answer 1

jQuery的offset方法将返回元素相对于文档的位置。这不完全是你需要的。

任何滑块或旋转木马背后的基本思想如下：

1. 您有一个“viewport”元素，通常是div，它充当其内部所有内容的定位锚点。通过在其上设置position:relative CSS声明，使其充当锚点。同时设置overflow:hidden以隐藏超出其边界的内容。我们称之为#container。
2. 在#container内，您可以在ul元素中找到项目列表。 ul有position:absolute CSS声明。我们称之为#content。
3. 通过设置#content CSS属性动画来移动left。

您已经掌握了基本概念，使用margin-left是一个合适的解决方案。但是动画left属性可以让你做一些漂亮的事情，比如CSS3过渡中的交换和尽可能的变换。这些将为您提供硬件加速，黄油般平滑的动画。

一个非常棒的插件，可以自动使用CSS3动画，支持的是jQuery Animate Enhanced：http://playground.benbarnett.net/jquery-animate-enhanced/。它可以让您编写代码，只需进行一些小的调整，并尽可能获得硬件加速图形。

Answer 2

我刚刚创建了一个名为margin的变量来跟踪当前的边距。按箭头导航时，按margin * 4增加或减少边距。如果按下底部导航，则从返回哪个寻呼机被cliceked的变量中获取int。如果第四个是点击。只需乘以4 *默认保证金。

如果有人有兴趣，我可以分享代码示例。