web移動端滑動插件

時間 2019-11-20

標籤 web 移動滑動插件欄目 HTML 简体版

原文原文鏈接

一、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: 0;margin: 0;}
        /*框架*/
        .swipe-wrap{width: 100%;height: 100%;position: relative;overflow: hidden;}
        .swipe{position:absolute;width:100%;}
        .swipe-box{width: 100%;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>

二、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>