设计滑屏框架的办法一般有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. [原创]首次制作JQueryUI插件-Timeline时间轴

    特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...

  2. Asp.Net Core 简单的使用加密的Cookie保存用户状态

    在以前的Asp.Net中可以用 FormsAuthentication 类的一系列方法来使用加密的Cookie存储用户身份,使用简单,可控性强.在Asp.Net Core中是否也可以的?答案是当然的. ...

  3. app端微信支付（二） - 生成预付单

    ​前一篇文章的时序图中说了,app端调用微信支付必须先由后台调用微信后台生成预付单,再构建参数给手机端,而数据的构建要以xml形式,那么看看代码具体实现吧,代码已经精简过了,自己的业务已经除去,精简的 ...

  4. 通过端口 8080 连接到主机 localhost 的 TCP/IP 连接失败

    错误:“connect timed out.请验证连接属性,并检查 SQL Server 的实例正在主机上运行,且在此端口接受 TCP/IP 连接,还要确保防火墙没有阻止到此端口的 TCP 连接.”这 ...

  5. quartz集群分布式(并发)部署解决方案-Spring

    项目中使用分布式并发部署定时任务,多台跨JVM,按照常理逻辑每个JVM的定时任务会各自运行,这样就会存在问题,多台分布式JVM机器的应用服务同时干活,一个是加重服务负担,另外一个是存在严重的逻辑问题, ...

  6. iOS 3D Touch实践

    本文主要讲解3DTouch各种场景下的开发方法,开发主屏幕应用icon上的快捷选项标签(Home Screen Quick Actions),静态设置 UIApplicationShortcutIte ...

  7. ubuntu14.04为安装fcitx卸载ibus后出现system setting (系统设置)中图标消失的问题

    最近在系统为ubuntu14．04原版中,安装fictx.按照以往的经验应先把ibus卸载干净,否则可能会有冲突.因此惯性思维驱使,先卸载ibus,然后安装fcitx,但是问题出现了,system s ...

  8. JSP之WEB服务器：Apache与Tomcat的区别 ，几种常见的web/应用服务器

    注意:此为2009年的blog,注意时效性(针对常见服务器)     APACHE是一个web服务器环境程序 启用他可以作为web服务器使用 不过只支持静态网页 如(asp,php,cgi,jsp)等 ...

  9. Tomcat 7.0的配置

     一.安装JDK 1.7     1.添加环境变量:在我的电脑->属性->高级->环境变量     2.新建系统变量,变量名:JAVA_HOME  变量值:C:\Program Fi ...

  10. SQL Left Join, Right Join, Inner Join, and Natural Join 各种Join小结

    在SQL语言中,存在着各种Join,有Left Join, Right Join, Inner Join, and Natural Join等,对于初学者来说肯定一头雾水,都是神马跟神马啊,它们之间到 ...