我发现iphone 5C介绍页面的滚动效果非常有趣。 完成滚动当前框后,它将自动捕捉到下一个内容框的顶部。
http://www.apple.com/hk/iphone-5c/
我试图找到涉及一小时的jquery插件但失败了。 请告诉我如何产生这种效果或在哪里找到关于它的教程。
谢谢。
答案 0 :(得分:2)
我用JQuery Mousewheel插件和scrollTo:
解决了这个问题var isScrolling = false;
$('.onepager').mousewheel(function (event, delta) {
if (!isScrolling) {
isScrolling = true;
if (delta < 0) {
if ($next = $('#navbox').find('.active').next('li').children('a').attr('href')) {
$('.onepager').scrollTo($next, {
offset: -120,
duration: 1000,
onAfter: function () {
isScrolling = false;
}
});
} else
isScrolling = false;
}
else if (delta > 0) {
if ($prev = $('#navbox').find('.active').prev('li').children('a').attr('href')) {
$('.onepager').scrollTo($prev, {
offset: -120,
duration: 1000,
onAfter: function () {
isScrolling = false;
}
});
} else
isScrolling = false;
}
}
return false;
});