jquery实现滚动鼠标时整屏翻页特效的实现

整屏翻页效果可详见苹果IPHONE5S的介绍页面：http://www.apple.com/cn/iphone-5s/， 当然苹果和其他很多类似同类整屏翻页的例子都是把页面滚动条隐藏掉。这次也将不把滚动条隐藏掉，并且可以通过点击/拖动滚动条实现整屏翻页的方法写出来。

鼠标滚轮实现整屏翻页：

该实例使用了jQuery Mousewheel插件（http://plugins.jquery.com/mousewheel/），使用以下代码之前须注意引用该插件:

var scrolling = false;//scrolling变量防止鼠标滚动翻页过快而影响翻屏体验（现在是滚轮动一下，翻一页，等翻完页才能下达新的翻页命令）
var scroll_num = 1;//scroll_num是用来记录翻到第几页的变量
var num=10;//num变量用来记录整屏翻页一共有多少页，限制scroll_num不会超过有效页数
var first=true;//first用来在页面不在第一页时刷新页面（刷新页面会重置所有变量导致scroll_num变为0，但滚动条位置却不变），重新计算scroll_num真实数据
$('html,body').bind('mousewheel', function (event, delta, deltaX, deltaY) {                    event.preventDefault();                
    if (scrolling == false) {
          if (first == true) {
               var scroll_position = $(window).scrollLeft() / $(window).width();
               scroll_num = Math.floor(scroll_position) + 1;
          }
          scrolling = true;                    
          if (delta == -1 && scroll_num + 1 <= num) { 
               scroll_num++; 
               $("html,body").animate({ scrollLeft: (scroll_num - 1) * $(window).width() }, 1000, function () { scrolling = false; }); 
          }else if (delta == 1 && scroll_num - 1 > 0) { 
               scroll_num--; 
               $("html,body").animate({ scrollLeft: (scroll_num - 1) * $(window).width() }, 1000, function () { scrolling = false; });
          }else { scrolling = false; }
    }                
});

 点击/拖动滚动条实现整屏翻页：

由于暂时找不到办法实现对鼠标对滚动条的点击/拖动的监控，该实例通过比较笨的方法，直接监控鼠标按下/放起动作，在鼠标按下时记录滚动条位置，放起时对比新的滚动条位置和原有滚动条位置是否一样，如不一样则判断鼠标对滚动条进行过点击。该实例使用的scrolling和scroll_num变量在上面引用过，这里就不再声明了。

var scroll_yet;
$(window).bind('mouseup', function () {                
    if (document.body.scrollLeft != scroll_yet) {
         var scroll_position = $(window).scrollLeft() / $(window).width();
         if (document.body.scrollLeft < scroll_yet) {                        
               scroll_num = Math.floor(scroll_position) + 1;                        
         }else{                        
               scroll_num = Math.ceil(scroll_position) + 1;                        
         }
         $("html,body").animate({ scrollLeft: (scroll_num - 1) * $(window).width() }, 1000, function () { });
         scrolling = false;
    } else {                    
        scrolling = false;
    }
 });
 
$(window).bind('mousedown', function () {
       if (scrolling != true) {
            scrolling = true;
            scroll_yet = document.body.scrollLeft;
            $("html,body").stop(true, true);
      }                
}); 

 

PS1：该实例所有代码均是实现横屏左右移动，如果要实现主流的竖屏上下移动，只需把scrollLeft改成scrollTop，把$(window).width()改成$(window).height()即可。

PS2：scrollLeft，scrollTop都可能出现浏览器不兼容的情况，我这里呢有两个兼容的方法来取得他们的值：

function mweb$$GetScrollTop() {
    if (self.pageYOffset) { return self.pageYOffset; }
    else if (document.documentElement && document.documentElement.scrollTop) { return document.documentElement.scrollTop; }
    else if (document.body) { return document.body.scrollTop; }
}

function mweb$$GetScrollLeft() {
    if (self.pageXOffset) { return self.pageXOffset; }
    else if (document.documentElement && document.documentElement.scrollLeft) { return document.documentElement.scrollLeft; }
    else if (document.body) { return document.body.scrollLeft; }
}