设计滑屏框架的办法一般有2种

  • 控制父容器法
  • 控制子容器法

这个算是控制父容器法

通过控制父容器的transform: translateY或margin-top或top的值来上下滑动页面，每次的位移的取值为当前页面高度~

这里采用slip框架，库大小5.75K，非常轻量，可以放心用在你的项目~

slip框架的页面样式需要自定义，不过这里我简单写好了~

(如果你不使用框架，推荐用transform: translate(X,Y)的写法，首先transform: translate可设计高性能动画，其次兼容android2.3+的系统，transform: translateY不兼容android2.3的系统)

兼容ios5+、android2.3+系统，其滑屏功能，响应灵敏~如果你只需要设计简单的滑屏效果，可考虑它~

slip框架更多详细的功能猛击这里https://github.com/binnng/slip.js

<!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.min.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>

DEMO

移动端框架篇-控制父容器的滑屏框架-slip.js的更多相关文章

  1. 移动端框架篇-控制子容器的滑屏框架-fullPage.js

    控制子容器法 方法是只显示其中一个子元素,其它隐藏,滑屏时隐藏当前元素,并显示当前元素的下一个同辈元素~ 这里采用fullPage框架,库大小7.69K~ fullPage框架的页面样式无需自定义,已 ...

  2. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  3. 小程序多端框架全面测评：chameleon、Taro、uni-app、mpvue、WePY

    摘要: 微信小程序开发技巧. 作者:coldsnap 原文:小程序多端框架全面测评 Fundebug经授权转载,版权归原作者所有. 最近前端届多端框架频出,相信很多有代码多端运行需求的开发者都会产生一 ...

  4. Spring - 父容器与子容器

    一.Spring容器(父容器) 1.Mapper代理对象 2.Service对象 二.Springmvc(前端控制器)(子容器)        Controller对象 1.标准的配置是这样的:Con ...

  5. Go游戏服务端框架从零搭建（一）— 架构设计

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居海边. 本教程以Go语言分区游戏服务端框架搭建为例. Go语言是Google开发的一种静态强类型.编译型.并发型.具有垃圾回收功能的编程语言.语法上近似C语 ...

  6. 父容器利用opacity设置透明后，子元素跟着变透明的解决方案

    背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从 ...

  7. 关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别

       html css <div class="register-wrapper"> <div class="register"> &l ...

  8. IE9父容器overflow:auto时，子容器状态更改导致滚动条下出现额外空间的问题探讨

    IE的每次跟新都会有一些奇葩的bug,我们默默承受了. 这个问题在项目中出现困扰了我近一个星期,这里记录一下.看下面实例 <style> .panel{ width: 200px; ove ...

  9. 父容器根据子容器高度自适应：设置父容器 height:100%;overflow:hidden;

    父容器根据子容器高度自适应:设置父容器  height:100%;overflow:hidden;

随机推荐

  1. linux 系统工具集

    Htop Htop是一款非常先进的交互式实时Linux进程监测工具.它非常类似Linux top命令,但是有一些丰富的功能特性,比如易于使用的界面,可用于管理进程.快捷键.进程的垂直和水平视图以及其他 ...

  2. 基于Fast Bilateral Filtering 算法的 High-Dynamic Range(HDR) 图像显示技术。

    一.引言 本人初次接触HDR方面的知识,有描述不正确的地方烦请见谅. 为方便文章描述,引用部分百度中的文章对HDR图像进行简单的描述. 高动态范围图像(High-Dynamic Range,简称HDR ...

  3. 科学计算器（JAVA实现）

    前记: 大二学 Java 的时候写的,现在贴上来,只为留念. 再翻代码,自己看着都头疼.一重重的 if 嵌套,当时写得费劲,现在看着更费劲. 代码思想: 代码的大致思想是这样: 首先定义一个算式字符串 ...

  4. PHP unset销毁变量并释放内存

    PHP的unset()函数用来清除.销毁变量,不用的变量,我们可以用unset()将它销毁.但是某些时候,用unset()却无法达到销毁变量占用的内存!我们先看一个例子: <?php $s=st ...

  5. [No00007C]dreamweaver cc 注释快捷键

    设置快捷键入口:编辑->快捷键 打开后: 先复制一份快捷键拷贝(系统自带的不让修改), 选择代码编辑 下拉到后面,设置快捷键

  6. PAT 1037. 在霍格沃茨找零钱（20）

    如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 -- 就如海格告诉哈利的:"十七个银西可(Sickle)兑一个加隆(Galleon),二十九个纳特(Knut)兑一个西可,很容易.& ...

  7. docker创建镜像

    手动创建: docker run -d -p mynginx:v2 nginx rpm -ivh http://mirrors.aliyun.com/epel/epel-release-latest- ...

  8. YOLO: Real-Time Object Detection

    YOLO detection darknet框架使用 YOLO 训练自己的数据步骤,宁广涵详细步骤说明

  9. js 判断各种数据类型

    了解js的都知道, 有个typeof  用来判断各种数据类型,有两种写法:typeof   xxx   ,typeof(xxx) 如下实例: typeof   2      输出   number   ...

  10. CREATE TABLE 表名 AS SELECT 语句

    1.新表不存在复制表结构即数据到新表 ? 1 2 create table new_table select * from old_talbe; 这种方法会将old_table中所有的内容都拷贝过来, ...