php - 页面动画 - 滚动文本

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")
            }
        });
    });
});

这样您仍然可以使用原来的导航，但取消页面更改。这将在文档准备好时调用，并将绑定(bind)到#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 来改进这一点。