web移动端滑动插件

1、slip只有6.3k可以说是非常小了，主要是通过css3里面的transform来改变的位置,控制的是父容器，使用也非常简单，具体信息移步slip.js。一个简单的demo如下

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

    <meta content="yes" name="apple-mobile-web-app-capable">

    <meta content="black" name="apple-mobile-web-app-status-bar-style">

    <meta content="telephone=no" name="format-detection">

    <meta content="email=no" name="format-detection">

    <title>slip</title>

    <style>

        *{padding: ;margin: ;}

        /*框架*/

        .swipe-wrap{width: %;height: %;position: relative;overflow: hidden;}

        .swipe{position:absolute;width:%;}

        .swipe-box{width: %;overflow: hidden;}

    </style>

</head>

<body>

<div class="swipe-wrap" id="slip">

    <article class="swipe">

        <div class="swipe-box" style="background-color: gray;">

            第1屏

        </div>

        <div class="swipe-box" style="background-color: green;">

            第2屏

        </div>

        <div class="swipe-box" style="background-color: orange;">

            第3屏

        </div>

        <div class="swipe-box" style="background-color: blue;">

            第4屏

        </div>

    </article>

</div>

</body>

<script type="text/javascript" src="js/slip.js"></script>

<script type="text/javascript">

    var container = document.getElementById('slip');

    var pages = document.querySelectorAll('.swipe-box');

    var slip = Slip(container, 'y').webapp(pages);

</script>

</html>

2、fullpage也只有7k，它是通过显示隐藏来实现的，而且支持缩放等效果，网上还有一个大的fullpage，功能更全主要在pc端使用的比较多，不要搞混了，下面介绍这个是不依赖JQ的，那个大的是依赖JQ的，具体信息移步fullpage

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>fullPage</title>
    <style>
        *{padding: 0;margin: 0;}

        body{overflow: hidden;}
        .page-wrap{overflow:hidden}
        .page{display:none;width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0}
        .contain{width:100%;height:100%;display:none;position:relative;z-index:0}
        .current .contain,.slide .contain{display:block}
        .current{display:block;z-index:1}
        .slide{display:block;z-index:2}
        .swipe{display:block;z-index:3;transition-duration:0ms!important;-webkit-transition-duration:0ms!important}
    </style>
</head>
<body>
<div id="pageContain" class="page-wrap">

    <div class="page page1 current" style="background-color: green;">
        <div class="contain">
            第一屏
        </div>
    </div>

    <div class="page page2" style="background-color: yellow;">
        <div class="contain">
            第二屏
        </div>
    </div>

    <div class="page page3" style="background-color: gray;">
        <div class="contain">
            第三屏
        </div>
    </div>

    <div class="page page4" style="background-color: purple;">
        <div class="contain">
            第四屏
        </div>
    </div>
</div>

</body>

<script type="text/javascript" src="js/fullPage.js"></script>
<script type="text/javascript">
    //禁止窗口的默认滑动
    document.ontouchmove = function(e){
        e.preventDefault();
    }

    runPage = new FullPage({

        id : 'pageContain',
        slideTime : 800,
        continuous : true,
        effect : {
            transform : {
                translate : 'Y',
                scale : [0.5, 1],
                rotate : [0, 0]
            },
            opacity : [0, 1]
        },
        mode : 'wheel,touch',
        easing : 'ease',
    });

</script>
</html>

巴特西

web移动端滑动插件

1、slip只有6.3k可以说是非常小了，主要是通过css3里面的transform来改变的位置,控制的是父容器，使用也非常简单，具体信息移步slip.js。一个简单的demo如下

2、fullpage也只有7k，它是通过显示隐藏来实现的，而且支持缩放等效果，网上还有一个大的fullpage，功能更全主要在pc端使用的比较多，不要搞混了，下面介绍这个是不依赖JQ的，那个大的是依赖JQ的，具体信息移步fullpage

最新文章

热门文章