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