【问题标题】:Hyperlinks slide new pages rather than opening them超链接滑动新页面而不是打开它们
【发布时间】:2018-12-11 00:37:18
【问题描述】:

我的经理让我尝试在此网站上复制滑动功能:

https://insight.bakermckenzie.com/blockchains-and-laws

页面左右两侧的导航箭头将用户引导至网站的其他页面,但其作用更像是一个轮播,而不是简单地以传统方式打开链接。即使点击浏览器的“后退/前进”按钮也会使网站在页面之间滑动,而不是正常打开它们。

我已经深入研究了源代码并使用了开发人员工具,但无法了解该网站究竟是如何做到这一点的。有任何想法吗?似乎它可能是 JavaScript,但我不太确定。

【问题讨论】:

标签: javascript html css carousel slide


【解决方案1】:

我找不到该站点使用的库,但我会尝试解释一下。 当您请求“新页面”时,通过单击箭头或菜单,所有内容都会异步加载。如果您注意 .page-container div,您可以看到当您“更改”页面时,带有您当前看到的内容的 div 移到一边,然后从页面中完全移除。

一步一步:

  1. 请求页面
  2. 新内容加载到一个尚不可见的 div 中。
  3. 您当前所在的页面移到一边,然后在视图中完全隐藏时删除其内容(整个 html 被删除)。
  4. 请求的“新页面”跟随“旧”页面移动。

它就像一个轮播,但新内容是异步加载的,旧的内容会被删除。

Div responsible for the content

【讨论】:

  • 这是一个巧妙的技巧。我似乎无法在任何地方找到任何关于如何开发它的指导。我已经用轮播构建了三个简单的页面,但我不确定如何让箭头链接并像我发送的示例网站那样异步加载其他页面。我也不知道如何让 div 像这样移动和加载。关于我可以去哪里解决这个问题的任何想法?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-04-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多