如何进行页面/内容过渡

Question

我对这一切很陌生，很抱歉我缺乏术语。

我正在查看这个网站，我想知道如何在不重新加载页面的情况下进行内容/页面更改。

有人可以指出我正确的方向吗？那是什么JavaScript？CSS 过渡？jQuery？ 或者你能给我看一些代码吗？任何帮助都会很棒;我已经环顾四周一段时间了，找不到类似的东西......

Answer 1

这是一个简单的滑块，只是不是幻灯片图像，而是幻灯片内容（嵌套的div，img，列表）。我为您检查了代码，并且正在使用这个jQuery插件：SudoSlider插件

不要通过编写自己的插件来重新发明轮子，您可以在这里看到一些演示，但这个演示非常接近使用自动高度的示例。这是您可以在您的网站上使用它的方式：

Jquery

<script type="text/javascript" >
    $(document).ready(function(){   
        var sudoSlider = $("#slider").sudoSlider();
    });
</script>

.HTML

<div id="slider" >
    <ul>
        <li><div> .... </div></li>
        <li>Lorem ipsum text + image</li>
        <li>List, maps, ...</li>
    </ul>
</div>

Answer 2

这是JQuery动画。 这是一个（非常光滑，但仍然）典型的轮播效果，其中你有一个延伸到可见屏幕之外的滑块div，它的左边距是动画的来创建效果。

创建

基本效果很简单（但当然要创建看起来和链接一样好的东西需要做很多工作）：

1. 将overflow-x: hidden设置为容器div
在
2. 容器内添加一个滑块div，并在滑块内滑动元素
3. 添加导航按钮，并在单击时对滑块的左偏移进行动画处理（跟踪当前位置）

这是一个非常基本的例子。

Answer 3

我可以说可以使用所有提到的选项:)

基本上，您可以使用类似 http://bxslider.com/的东西来实现您想要的内容，而不是在列表项中使用 img 元素使用某些内容项。