GitHub Slider JQuery插件

新的Github HTML5和CSS3（HTML5历史API）树导航非常棒： https ： //github.com/blog/760-the-tree-slider

他们使用哪个JQuery插件来执行UI幻灯片效果？ 或者类似的（Jquery Slide with Ajax loading）

谢谢

Answer 1

我查看了他们的源代码，他们没有使用CSS3或插件。 它使用jquery动画。 他们在Github博客上提供的代码片段是一个良好的开端，但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; } 

实际滑动使用更多技巧：

1. 设置#slider overflow：hidden
2. 获取该部分的宽度以进行动画处理。
3. 创建一个两倍宽度的传输div（传输）。
4. 将原始div的内容复制到临时div（当前）。
5. 将新内容放在另一个临时div（下一个）中。
6. 将当前和下一个并排放入转移。
7. 从原始div中删除内容并将新的转移div放入（应该看起来相同）。
8. 动画转移div – 新外观完整。
9. 用新数据替换原始div内容（看起来与上一步相同）。

这是左侧的幻灯片：

 $.fn.slideTo = function(data) { var width = parseInt($('#slider').css('width')); var transfer = $('
').css({ 'width': (2 * width) + 'px' }); var current = $('
').css({ 'width': width + 'px', 'left': '0', 'float': 'left' }).html($('#slider').html()); var next = $('
').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); }); } 

这是一个工作示例： 滑块示例 。 使用支持历史记录的浏览器单击菜单。 我开始使用CSS3，但使用jquery动画回调检测转换/转换何时完成更容易。

Answer 2

我想它会对你有所帮助。

jquery.sliders

Answer 3

检查一下你可能会喜欢它。 非常简单的滑块。

https://github.com/Yene-Me/Slider-Menu