设计滑屏框架的办法一般有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. Windows10的革命之路-全新UWP开发平台

    众所周知,最近几年,微软一直在操作系统上进行统一化的尝试.第一次尝试的产品——Windows 8/8.1操作系统完全谈不上成功.请看下图: 我个人认为,这并不意味着操作系统统一化的策略是错误的,只能算 ...

  2. 使用WinRar软件制作程序安装包

    之前我写过使用好压软件打包程序,见随笔: 使用好压(HaoZip)软件打包EverEdit制作安装程序 - Fetty - 博客园http://www.cnblogs.com/fetty/p/4907 ...

  3. hdu-5977 Garden of Eden(树分治)

    题目链接: Garden of Eden Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/ ...

  4. CODEVS1643 线段覆盖3[贪心]

    1643 线段覆盖 3   时间限制: 2 s   空间限制: 256000 KB   题目等级 : 黄金 Gold 题解       题目描述 Description 在一个数轴上有n条线段,现要选 ...

  5. 深入理解Java之泛型

    原文出处: absfree 1. Why ——引入泛型机制的原因 假如我们想要实现一个String数组,并且要求它可以动态改变大小,这时我们都会想到用ArrayList来聚合String对象.然而,过 ...

  6. linux解压包

    1．命令格式:tar[必要参数][选择参数][文件] 2．命令功能:用来压缩和解压文件.tar本身不具有压缩功能.他是调用压缩功能实现的 3．命令参数:必要参数有如下:-A 新增压缩文件到已存在的压缩 ...

  7. Intellij Idea中的Jetty报出Web application not found src/main/webapp错误的解决方案

    今天在Intellij Idea中编译项目的时候,运行起来一直会报出如下的错误: Web application not found src/main/webapp 当时感觉应该是什么文件缺少了.所以 ...

  8. onselectstart与onselect

    这两个事件看起来很相似,事实上却非常的不同. onselectstart onselectstart几乎可以用于所有对象,其触发时间为目标对象被开始选中时(即选中动作刚开始,尚未实质性被选中).该事件 ...

  9. 使用Unity Container

    Lab1.使用Unity Container Unity Container最主要的两个方法就是RegisterType和Resolve了,RegisterType用于注册类型的映射,而Resolve ...

  10. 解决win8 下 eclipse 中文字体太小的问题

    一.把字体设置为Courier New  操作步骤:打开Elcipse,点击菜单栏上的“Windows”——点击“Preferences”——点击“Genneral”——点击“Appearance”— ...