首页 > 手机js特效 > 前端框架 > 手机基于Zepto的移动端多功能滚动模块插件js特效下载

手机基于Zepto的移动端多功能滚动模块插件js特效下载

上一篇 下一篇
#Zepto.pageSlider
 
基于Zepto的移动端多功能滚动模块插件
 
A Zepto JS plugin that creates the various slider modules.
 
Readme for En
 
##使用方法
 
step.1 引入 zpeto.js 及插件
 
<script type="text/javascript" src="path/to/zepto.js"></script>
<script type="text/javascript" src="path/to/zepto.pageSlider.js"></script>
step.2 HTML Element
 
<div id="container">
<div class="page">
        page1
    </div>
<div class="page">
        page2
    </div>
<div class="page">
        page3
    </div>
</div>
step.3 初始化
 
<script type="text/javascript">
Zepto(function($){
    var $container = $("#container");
    $container.pageSlider({
        loop:false,
        easingTime:600
    });
});
 
</script>
##可选参数及默认值
 
$container.pageSlider({
    pageSelector: ".page",     //页面DOM使用的selector,默认为`.page`
    height:     windowHeight,  //默认为window高。可传入百分比(按父级百分比),或 px 值
    width:      windowWidth,   //默认为window宽。可传入百分比(按父级百分比),或 px 值
    horizontal: false,      //默认为竖直排布scroll,可以水平
    autoSpeed:  5000,       //自动播放速度
    auto:       false,      //是否自动播放
    loop:       true,       //是否循环播放
    percentThreshold: 10,   //拉动超过百分比时翻页
    easing:     'ease-out', //缓动函数方式 `linear`, `ease`, `ease-out`
    easingTime: 400,        //缓动延迟
    pageCss:    {},         //page额外的css(不接受height,width,会被覆盖)
    prevBtn:    null,       //向前翻页按钮
    nextBtn:    null,       //向后翻页按钮
    beforeMove: function($currentPage, $toPage, toIndex){}, //翻页前callback
    afterMove:  function($fromPage, $currentPage, currentIndex){}  //翻页后callback
});
##注意
 
请自行设置页面的css reset (例如取消 body 的padding和margin,特别是全屏 slider 时。插件有多种使用方式,因此没有加入全局的 style sheet )。
同一页面中可以存在多个不同的 slider 实例,也可叠加存在(即一个实例中包含另一个或多个)。分别实例化即可。详见 examples 。
##更多例子
 
examples
 
##兼容性
 
( 真机测试机型有限。欢迎提交 issue )
 
Android 2.3+
iOS 6+

模板简介:该模板名称为【手机基于Zepto的移动端多功能滚动模块插件js特效下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【前端框架】栏目查找您需要的精美模板。

  • 下载密码 lanrenmb
  • 下载次数 12,777次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 11-08
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
  • 焦点图
  • 导航菜单
  • 悬浮漂浮
  • tab标签
  • 前端框架
  • 热门推荐 更多 >
    自适应 响应式 微信图片 单页式简历模板 微信素材 企业网站 html5 微信文章 微信公众平台 微信模板
    您可能会喜欢的其他模板