页面动画 - 滚动文本

我想创建一个类似于以下站点链接的效果，其中文本显示在可滚动的修复大小文本框中，但是我想使用与示例中类似的图形设计样式反对使用标准的HTML滚动条。页面动画 - 滚动文本

我也希望页面永不需要刷新，例如当你点击不同的菜单标题时，它只是改变显示的内容，而不必重新加载页面。我知道这部分可以用Javascript来完成，并且对如何去做这件事有一个公平的想法，但是不知道从第一部分开始。

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

范例网站：

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

2011-11-26 jskrwyk

一个良好的开端动画，Ajax和JavaScript是使用图书馆一样jQuery。您仍然可以使用带有真正网址的菜单，这些网址适用于搜索引擎优化原因的正确网址。但是当用户按下该按钮时，Javascript将取消真正的请求并使用Ajax调用来获取内容。使用jQuery的小例子：

这样，您仍然可以使用原始导航但取消pagechange。这将在文档准备好时被调用，并且将被绑定到#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") 
     }

上面的例子使用（一些读的东西）：

可能的改进：
这个代码不使用任何缓存，播种，当你点击一个链接第二次，它的另一个Ajax请求。您可以通过给.page类别提供一个链接到#menu li a的ID来改善此情况。

来源

2011-11-26 12:10:05 Niels

可以使用div让所有的文本内容，并给予一定的高度和溢出：在你的风格的汽车，你会得到自动滚动根据您的文字内容高度，并使用一些脚本应用/使花式滚动酒吧。
Jquery是在不加载/刷新页面的情况下为您的内容带来最佳选择。每次点击您的标题链接使用Jquery.load加载您的其他页面内容并加载主体/ div内容

来源

2011-11-26 12:10:32 manny

页面动画 - 滚动文本

回答

相关问题