【问题标题】: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;
    }
    

    实际滑动使用更多技巧:

    1. 设置#slider 溢出:隐藏
    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 = $('<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

    【讨论】:

      猜你喜欢
      • 2012-01-23
      • 2012-02-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-12-27
      • 1970-01-01
      • 1970-01-01
      • 2012-05-21
      相关资源
      最近更新 更多