如何进行页面/内容转换答案

【问题标题】：How to do page / content transitions如何进行页面/内容转换
【发布时间】：2015-12-10 15:23:56
【问题描述】：

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

我正在查看this site，我想知道如何在不重新加载页面的情况下更改内容/页面。

有人能指出我正确的方向吗？那是什么JavaScript？ CSS 过渡？ jQuery？或者你能给我看一些代码吗？任何帮助都会很棒；找了好久没找到类似的东西……

【问题讨论】：

标签： javascript html css css-transitions

【解决方案1】：

这是一个简单的滑块，它不是滑动图像，而是滑动内容（嵌套的 div、img、列表）。我为你检查了代码并使用了这个 jQuery 插件：SudoSlider plugin

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

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>

【讨论】：

【解决方案2】：

它是JQuery animation。这是一个（非常流畅，但仍然）典型的轮播效果，其中您有一个超出可见屏幕的滑块 div，并且它的左边距被动画以创建效果。

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

将overflow-x: hidden 设置为容器div
在容器内添加滑块 div，并在滑块内滑动元素
添加导航按钮，并在单击时为滑块的左偏移设置动画（跟踪当前位置）

Here's a really basic example.

【讨论】：

【解决方案3】：

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

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

【讨论】：