1

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

滑块

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

现在我打算做的是：

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

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

提前致谢。

编辑：

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

4

2 回答 2

0

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

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

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

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

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

于 2012-05-04T01:27:45.037 回答
0

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

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

于 2012-05-11T02:28:32.740 回答