GitHub 滑块 JQuery 插件答案

【问题标题】：GitHub Slider JQuery PluginGitHub 滑块 JQuery 插件
【发布时间】：2011-07-22 03:01:40
【问题描述】：

新的 Github HTML5 和 CSS3（HTML5 History API）树导航很棒： https://github.com/blog/760-the-tree-slider

他们使用哪个 JQuery 插件来做 UI 幻灯片效果？或者可能是类似的（带有 Ajax 加载的 Jquery Slide）

谢谢

【问题讨论】：

我尝试了here。它远没有 Github 好，但非常欢迎您对其进行扩展。
你可以查看他们的来源。他们还提到他们使用 CSS3 来实现滑动效果。

标签： jquery jquery-plugins github

【解决方案1】：

我想它会帮助你。

jquery.sliders

【讨论】：

【解决方案2】：

我查看了他们的源代码，他们没有使用 CSS3 或插件。它使用 jquery 动画。他们在Github blog 上提供的代码 sn-ps 是一个好的开始，但 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（应该看起来相同）。
动画传输 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 animate 回调更容易检测过渡/变换何时完成。

【讨论】：

不错的回复，但缺少 jsfiddle 链接:(

【解决方案3】：

看看这个你可能会喜欢。非常简单的滑块。

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

【讨论】：