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

【问题标题】：How to find the current location of an element in browser?如何在浏览器中找到元素的当前位置？
【发布时间】：2012-05-03 23:35:51
【问题描述】：

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

我已经能够通过动画边距更早地获得这种效果。但它效率不高，并且有很多错误。所以我想我宁愿从头开始。

现在我打算做的是：

使用箭头导航，为边缘设置动画并转到下一张幻灯片。
通过分页，找出缩略图的当前位置，并为等于文章宽度 + 装订线的边距设置动画。

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

提前致谢。

编辑：

我实际上已经完成了滑块。它按我的意愿完美运行。过几天我会回答这个问题。此外，当网站完成后，我将分享链接，以便其他人可以看到它的实际效果。 :)

【问题讨论】：

已经有很多的 jQuery 插件可以做这种事情。为什么要重新发明轮子？
@RokoC.Buljan 缩略图不会放大。它只会动画一点，我将使用 css 来做。当您按下视图时，将打开一个带有相关内容的模式窗口。是的，数字只能滑动一个缩略图。
@MДΓΓБДLL 我找不到任何我想要的东西。而且我也可以学习。如果有的话，你能指点我，让我检查一下吗？
迫不及待地想看看它的实际应用！

标签： jquery html css slider offset

【解决方案1】：

jQuery 的 offset 方法将返回一个元素相对于文档的位置。这并不是您所需要的。

任何滑块或轮播背后的基本思想如下：

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

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

在支持的情况下自动使用 CSS3 动画的一个了不起的插件是 jQuery Animate Enhanced：http://playground.benbarnett.net/jquery-animate-enhanced/。它可以让您编写几乎与现有代码一样的代码，只需进行一些小调整，并在可能的情况下获得硬件加速图形。

【讨论】：

非常感谢您提供的信息。我已经知道如何制作滑块了。我使用一个导航制作了许多滑块。但是这里的事情有点复杂，因为我必须照顾两个导航。但我肯定会寻找你提到的过渡。我猜 jquery.easing 有相当漂亮的缓动效果。

【解决方案2】：

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

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

【讨论】：