欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 手机js特效 > 前端框架 >

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

    2018-11-08 10:05 来源/作者:懒人模板 分类:前端框架  « »
    #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+

    点击扫描效果预览免费下载免登陆网盘下载
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议