新的Github HTML5和CSS3(HTML5 History API)树形导航非常棒:https://github.com/blog/760-the-tree-slider
他们在使用哪个JQuery插件来实现UI滑动效果?或者使用了类似的插件(Jquery Slide with Ajax loading)?
谢谢
新的Github HTML5和CSS3(HTML5 History API)树形导航非常棒:https://github.com/blog/760-the-tree-slider
他们在使用哪个JQuery插件来实现UI滑动效果?或者使用了类似的插件(Jquery Slide with Ajax loading)?
谢谢
我查看了他们的源代码,他们并没有使用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;
}
实际的滑动效果使用了更多技巧:
这是向左滑动的代码示例:
$.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动画回调检测转换/变换何时完成更容易。