Question

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

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

示例网站将Flash用于所有动画。但是，我想坚持使用服务器端/客户端语言，例如HTML / HTML5，Javascript / jquery，PHP

示例网站：

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

Answer 1

动画，Ajax和Javascript的良好开端是使用像jQuery这样的库。您仍然可以使用带有真实网址的菜单，这些网址会出于搜索引擎优化的原因转到右侧网址。但是当用户按下该按钮时，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")
            }
        });
    });
});

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

#content

如果您要插入并滑出内容。你必须得到一个DIV，它将被添加到你#content { height: 600px; overflow: auto; /* Makes scrollbar when needed */ }。所以结构将是这样的：

#content

成功函数看起来像：

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

以上示例使用（一些读取内容）：

jQuery.ajax
jQuery.siblings
jQuery.addClass / jQuery.removeClass
jQuery.slideDown / jQuery.slideUp

可能的改进：
此代码不使用任何缓存，当您第二次单击链接时播种，它会执行另一个Ajax请求。您可以通过为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") }类提供与.page相关联的ID来改善此问题。

Answer 2

您可以使用div来保存所有文本内容并给出固定的高度和溢出：自动在您的风格中，您将根据您的文本内容高度自动滚动并使用一些脚本来应用/制作花式滚动条
Jquery是在不加载/刷新页面的情况下提供内容的最佳选择。每次点击您的标题链接都使用Jquery.load加载您的其他页面内容并加载主体/ div内容

页面动画 - 滚动文本

2 个答案: