頁面動畫 - 滾動文本

我想創建一個類似於以下站點鏈接的效果，其中文本顯示在可滾動的修復大小文本框中，但是我想使用與示例中類似的圖形設計樣式反對使用標準的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

頁面動畫 - 滾動文本

回答

相關問題