jQuery支持mobile的全屏水平横向翻页效果

这是一款支持移动手机mobile设备的jQuery全屏水平横向翻页效果插件。该翻页插件可以使页面在水平方向上左右全屏翻动，它支持手机触摸屏，支持使用鼠标滚动页面。整个页面过渡平滑，效果非常不错。

安装

使用该水平横向翻页插件要引入jQuery和jquery.horizonScroll.js文件，要实现对移动mobile手机的支持还要引入jquery.touchSwipe.js文件。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.js"></script>
<script type="text/javascript" src="js/jquery.horizonScroll.js"></script>                
              

使用方法

HTML结构

该水平横向翻页效果的每一个页面可以是一个<section>或<div>等用于存放内容的块级元素。

<section data-role="section" id="section-section1"></section>               
              

调用插件

可以通过选择器来指定需要制作水平翻页效果的元素：

$('selector').horizon();                
              

如果你不想使用jquery.swipeTouch.js来对移动mobile手机的触摸支持，可以禁用它：

$('selector').horizon({swipe: false});                
              

默认参数

以下是该水平横向翻页插件的默认参数：

$.fn.horizon.defaults = {
    scrollTimeout: null,
    scrollEndDelay: 250,
    scrollDuration: 400,
    i: 0,
    limit: 0,
    docWidth: 0,
    sections: null,
    swipe: true,
    fnCallback: function (i) {}
};                
              

你可以向左移动页面，也可以向右移动页面，或者使页面直接跳转回主页。你可以使用下面的方法来跳转页面(代码中省略了选择器)：

$(document).horizon('scrollRight');
$(document).horizon('scrollLeft');
$(document).horizon('scrollTo', i);