Php 页面动画-滚动文本

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

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

示例站点使用Flash制作所有动画。然而，我想坚持使用服务器/客户端语言，例如HTML/HTML5、Javascript/jquery、PHP

示例站点：

---

动画、Ajax和Javascript的一个良好开端是使用类似的库。出于SEO原因，您仍然可以使用带有真实url的菜单，这些url指向正确的url。但当用户按下该按钮时，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")
            }
        });
    });
});

这样，您仍然可以使用原始导航，但可以取消页面更改。这将在文档准备就绪时调用，并绑定到

菜单LIA的
单击事件。如果您想拥有固定高度的内容，可以将CSS作为
#内容
，如下所示：

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

上面的例子使用（一些阅读材料）：



/
/
可能的改进：

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

您可以使用div保留所有文本内容，并提供固定高度和溢出：在您的样式中，您将根据文本内容高度自动滚动，并使用一些脚本应用/制作精美的滚动条

Jquery是在不加载/刷新页面的情况下提供内容的最佳选项。每次单击标题链接都使用Jquery.load加载其他页面内容，并加载主体/div内容