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. 从零开始学 Web 之 移动Web（五）touch事件的缺陷，移动端常用插件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  3. swiper嵌套小demo(移动端触摸滑动插件)

    swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 :  https://github.com/Clear ...

  4. 移动端触摸滑动插件Swiper使用指南

    Swiper是一款开源.免费.功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4.Swiper主要面向的是手机.平板电脑等移动设备,帮助开发者轻松实现触屏焦点图.触屏Tab切换.触屏 ...

  5. 【miscellaneous】海康威视监控摄像头实现web端无插件监控实拍效果

    [rtsp]海康威视监控摄像头实现web端无插件监控实拍效果 详细介绍参见:http://live.cuplayer.com/RtspCameraLive.html web端无须装插件(支持PC,安卓 ...

  6. 自制 移动端 纯原生 Slider滑动插件

    在Google搜关键字“slider”或“swiper”能找到一大堆相关插件,自己造轮子是为了能更好的理解其中的原理. 给这个插件取名为“veSlider”是指“very easy slider”非常 ...

  7. Swipe-移动端触摸滑动插件swipe.js

    原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...

  8. 【转载】Web移动端Fixed布局的解决方案

    特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...

  9. photoSlider-原生js移动开发轮播图、相册滑动插件

    详细内容请点击 在线预览   立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...

随机推荐

  1. BZOJ 1619 [Usaco2008 Nov]Guarding the Farm 保卫牧场：dfs【灌水】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1619 题意: 给你一个n*m的地形图,位置(x,y)的海拔为h[x][y]. 一个山顶的定 ...

  2. codeforces A. Point on Spiral 解题报告

    题目链接:http://codeforces.com/problemset/problem/279/A 题目意思:给出一个坐标点(x, y),问当从(0, 0) 开始到达该点转过的拐角有多少个.(拐角 ...

  3. elasticsearch function_score Query——文档排序结果的最后一道墙

    function_score Query The function_score query is the ultimate tool for taking control of the scoring ...

  4. Java面向对象的三大特征详解

    一.封装(Encapsulation)       封装也称信息隐藏,是指利用抽象数据类型把数据和基于数据的操作封装起来,使其成为一个不可分割的整体,数据隐藏在抽象数据内部,尽可能的隐藏数据细节,只保 ...

  5. 数学题--On Sum of Fractions

    题目链接 题目意思: 定义v(n)是不超过n的最大素数, u(n)是大于n的最小素数. 以分数形式"p/q"输出 sigma(i = 2 to n) (1 / (v(i)*u(i) ...

  6. PS 图像滤镜— — USM 锐化

    这个算法的原理很简单,就是先用高斯模糊获取图像的低频信息,然后用原图减去高斯模糊之后的图,得到图像的高频信息,再将原图与高频信息融合,进一步增强原图的高频信息,看起来,图像的边缘显得特别的sharp. ...

  7. python 二分法例子及冒泡排序

    #!/usr/bin/env python #-*- coding:utf-8 -*- def binary_search(source_data,find_nu): mid = len(source ...

  8. vue-router 获得上一级路由以及返回上一级路由的方法

    if (this.$store.state.previousRouter.name) { this.$router.push({name: this.$store.state.previousRout ...

  9. kafka之三：kafka java 生产消费程序demo示例

    kafka是吞吐量巨大的一个消息系统,它是用scala写的,和普通的消息的生产消费还有所不同,写了个demo程序供大家参考.kafka的安装请参考官方文档. 首先我们需要新建一个maven项目,然后在 ...

  10. UItextFied 的属性

    网络学习笔记 在iPhone应用中通过UITextField填写信息时,经常出现出现自动更正输入信息.首字母大写等情况 尤其是在填写用户名时,这种本想提供便捷的功能反而让人感到特别麻烦 今天查了相关书 ...