logo标签列表

GitHub滑块JQuery插件

jqueryjquery-pluginsgithub
11

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

他们在使用哪个JQuery插件来实现UI滑动效果？或者使用了类似的插件（Jquery Slide with Ajax loading）？

谢谢

3
我试着做了这个这里。虽然不如 Github 的好，但你可以随意进行扩展。 - Phil
你可以查看他们的源代码。他们还提到他们正在使用CSS3来实现滑动效果。 - no.good.at.coding
3个回答
35

我查看了他们的源代码，他们并没有使用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 宽度两倍的转移 div（transfer）。
  4. 将原始 div 的内容复制到一个临时 div 中（current）。
  5. 将新内容放入另一个临时 div 中（next）。
  6. 将 current 和 next 并排放入 transfer 中。
  7. 从原始 div 中删除内容并放入新的 transfer div（应该看起来相同）。
  8. 对 transfer div 进行动画——新外观完成。
  9. 用新数据替换原始 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);
    });
}

这里有一个可用的示例：滑块示例。使用支持历史记录的浏览器点击菜单。我开始使用CSS3，但通过jQuery动画回调检测转换/变换何时完成更容易。

回复不错，但是缺少 jsfiddle 链接 :( - Mou
0
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接