基于zepto.js的移动端H5单页面跟随手指滑动切换控件pageSlider
发布在移动web前端开发2015年10月24日view:7811HTML5css3前端开发BrettBat移动开发
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

pageSlider.js 是一个基于zepto.js用于实现H5单页面跟随手指上下滑动切换的组件,支持启动GPU加速,目前仅支持移动端touch设备。

DEMO

请用手机扫描以下二维码,在打开的页面上下滑动查看效果 enter image description here

用法

HTML结构

<!DOCTYPE html>
<html>
    <head>
      <!-- styles, scripts, etc -->
    </head>
    <body>
        <div class="section sec1"></div>
        <div class="section sec2"></div>
        <div class="section sec3"></div>
        <div class="section sec4"></div>
    </body>
</html>

在页面中引入控件所需样式表文件pageSlider.css

<link rel="stylesheet" href="../dist/pageSlider.css">

本控件基于zepto.js,需要在页面中引入zepto.js文件

<script src='http://cdn.bootcss.com/zepto/1.1.4/zepto.min.js'></script>

引入pageSlider.js或pageSlider.min.js文件

<script src='../dist/pageSlider.js'></script>

在页面DOM加载完毕之后,初始化控件

$(function() {
    var pageSlider = PageSlider.case();
});

设置 settings

初始化PageSlider控件时,支持传入一个参数,用于配置控件功能

PageSlider.case(optOrIndex);

参数optOrIndex可以是一个数字(number),用于设置初始显示的页码,也可以是一个json对象,详细说明见Github

切换到指定页面

在页面初始化后,可调用控件的go方法跳转到指定页面。

//PageSlider初始化
var pageSlider = PageSlider.case();
//跳转到第3页
pageSlider.go(3);

项目地址:https://github.com/Franslee/pageSlider

评论
发表评论
暂无评论
WRITTEN BY
Frans.Lee
混迹帝都的前端攻城狮一枚。关注HTML/CSS/JavaScript、HTML5、Node.js、移动触屏web和web app开发等领域
TA的新浪微博
PUBLISHED IN
移动web前端开发

移动web前端开发相关文章

我的收藏