Question

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

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

由于

Answer 1

我查看了他们的源代码，他们没有使用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 overflow：hidden
将该部分的宽度设置为动画。
创建两倍宽度的传输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动画回调检测转换/转换何时完成更容易。

Answer 2

我想这会对你有帮助。

jquery.sliders

Answer 3

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

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

GitHub Slider JQuery插件

3 个答案: