页面动画 - 滚动文本

Question

我想创建类似于以下站点链接的效果，其中文本显示在固定大小的文本框中，然后可滚动，但是我想使用与示例类似的图形设计风格，而不是使用标准 HTML 滚动条它。

我还希望页面永远不需要刷新，例如，当您单击不同的菜单标题时，它只会更改显示的内容，而不必重新加载页面。我知道这部分可以用 Javascript 完成，并且很清楚如何去做，但不知道第一部分从哪里开始。

该示例网站的所有动画均使用 Flash。不过，我想坚持使用服务器/客户端语言，例如 HTML/HTML5、Javascript/jquery、PHP

示例站点：

http://www.theoceancollective.com/main.html

Answer 1

对于动画、Ajax 和 Javascript 来说，一个好的开始是使用像 jQuery 这样的库。您仍然可以使用带有真实网址的菜单，出于 SEO 原因，该菜单会转到正确的网址。但是当用户按下该按钮时，Javascript 将取消真正的请求并使用 Ajax 调用来获取内容。使用 jQuery 的小例子：

$(function(){
    $("#menu li a").click(function(e){
        e.preventDefault(); // Cancel the page change
        var _this = $(this);
        $.ajax({
            url : "/urltogetpagecontent.php",
            success : function(result)
            {
                // Put result in #content div
                $("#content").html(result);
                // Change page selected, the new LI will have the class selected and it will be removed from the other LI's within #menu
                _this.parent().addClass("selected").siblings().removeClass("selected")
            }
        });
    });
});

这样您仍然可以使用原始导航，但取消页面更改。这将在文档准备好时调用，并将绑定到#menu li a 的click 事件。如果你想让内容具有固定的高度，你可以将你的CSS设置为#content，如下所示：

#content
{
    height: 600px;
    overflow: auto; /* Makes scrollbar when needed */
}

如果你想滑入和滑出你的内容。您必须包围一个 DIV，它将添加到您的#content 中。因此，结构将类似于：

<div id="content">
    <div class="page">
        // Default page
    </div>
    <div class="page">
        // Second page loaded
    </div>
</div>

成功函数将类似于：

success : function(result)
        {
            // Put result in #content div
            var result = $(result).hide();
            $("#content").append(result);
            $("#content page").slideUp(); // Slide old content up
            result.stop(true, false).slideDown(); // Slide new content down

            // Change page selected, the new LI will have the class selected and it will be removed from the other LI's within #menu
            _this.parent().addClass("selected").siblings().removeClass("selected")
        }

上面的示例使用（一些阅读内容）：

1. jQuery.ajax
2. jQuery.siblings
3. jQuery.addClass / jQuery.removeClass
4. jQuery.slideDown / jQuery.slideUp

可能的改进：
此代码不使用任何缓存，当您第二次单击链接时，它会执行另一个 Ajax 请求。您可以通过为 .page 类提供一个链接到 #menu li a 的 ID 来改进这一点。

Answer 2

1. 您可以使用 div 来保留所有文本内容，并在您的样式中指定固定高度和 Overflow:auto，您将根据文本内容高度自动滚动，并使用一些脚本来应用/制作精美的滚动条。

2. Jquery 是无需加载/刷新页面即可获取内容的最佳选择。每次点击标题链接都会使用 Jquery.load 加载其他页面内容并加载主体/div 内容