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

当前位置:主页 > jQuery库 > 布局和界面 > jQuery支持mobile的全屏水平横向翻页效果
jQuery支持mobile的全屏水平横向翻页效果
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-03-14
    阅读:
简要教程

这是一款支持移动手机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);