GitHub的滑塊jQuery插件

新Github的HTML5和CSS3（HTML5歷史API）樹導航是巨大的：jQuery插件，他們使用哪一個做UI滑動效果 https://github.com/blog/760-the-tree-slider GitHub的滑塊jQuery插件

？或者，也許我猜一個類似（jQuery的幻燈片使用Ajax加載）

感謝

來源

2011-03-24 Paul

他們已經自己做了。 – Robik 2011-03-24 13:07:44

我在這[這裏]去了（http://blog.philipbrown.id.au/2011/03/awesome-pagination-with-zf-paginator-ajaxcontext-and-the-html5-history-api/）。它遠不及Github的那麼好，但是你更歡迎擴展它。 – Phil 2011-03-24 13:12:45

你可以查看他們的來源。他們還提到他們使用CSS3來實現滑動效果。 – 2011-03-24 13:14:54

我通過自己的源代碼，看了一下，他們不使用CSS3或插件。它使用jquery動畫。他們在Github blog上給出的代碼片段是一個好的開始，但popstate處理程序是誤導性的。試試這個：

$(window).bind('popstate', function (e) { 
    if (e.originalEvent.state && e.originalEvent.state.path) { 
     $.get(e.originalEvent.state.path, function(data) { 
      $('#slider').slideTo(data);  
     }); 
     return false; 
    } 
    return true; 
}

實際滑動用途更多的招數：

集#slider溢出：隱藏
到動畫部分的寬度。
創建一個兩倍於此寬度的轉移div（轉移）。
將原始div的內容複製到臨時div（當前）。
將新內容放入另一個臨時div（下一個）。
將電流和下一個並排放入轉移。
從原始div中刪除內容並將新的轉換div放入（應該看起來相同）。
animate transfer div - 新外觀完整。
用新數據替換原始div內容（看起來與前一步相同）。

這裏的幻燈片左：

$.fn.slideTo = function(data) { 
    var width = parseInt($('#slider').css('width')); 
    var transfer = $('<div class="transfer"></div>').css({ 'width': (2 * width) + 'px' }); 
    var current = $('<div class="current"></div>').css({ 'width': width + 'px', 'left': '0', 'float': 'left' }).html($('#slider').html()); 
    var next = $('<div class="next"></div>').css({ 'width': width + 'px', 'left': width + 'px', 'float': 'left' }).html(data); 
    transfer.append(current).append(next); 
    $('#slider').html('').append(transfer); 
    transfer.animate({ 'margin-left': '-' + width + 'px' }, 300, function() { 
     $('#slider').html(data); 
    }); 
}

而這裏的工作的例子：Slider example。點擊支持歷史的瀏覽器的菜單。我開始使用CSS3，但使用jquery動畫回調來檢測轉換/轉換何時完成更容易。

來源

2011-12-29 22:32:18 neonguru

很好的回覆，但jsfiddle鏈接丟失:( – Mou 2014-12-09 12:11:45