控制子容器法

方法是只显示其中一个子元素，其它隐藏，滑屏时隐藏当前元素，并显示当前元素的下一个同辈元素~

这里采用fullPage框架，库大小7.69K~

fullPage框架的页面样式无需自定义，已有写好的

兼容ios5+、android2.3+、winphone 8系统，其滑屏功能，效果比较丰富，支持缩放、旋转、透明度、自动滑屏等动画效果~如果你需要设计精彩的滑屏效果，可考虑它~

fullPage框架更多详细的功能猛击这里https://github.com/powy1993/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>

<!--[if lte IE 7]>

<body scroll="no">

<![endif]-->

<!--[if gt IE 7]><!-->

<body>

<!--<![endif]-->

<!-- 框架[[ -->

<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.min.js"></script>

<script type="text/javascript">

//禁止窗口的默认滑动

document.ontouchmove = function(e){

    e.preventDefault();

}

//框架

var runPage,

    interval,

    autoPlay;

autoPlay = function(to) {

    clearTimeout(interval);

    interval = setTimeout(function() {

        runPage.go(to);

    }, 5000);

}

runPage = new FullPage({

    id : 'pageContain',                            // id of contain

    slideTime : 800,                               // time of slide

    continuous : true,                             // create an infinite feel with no endpoints

    effect : {                                     // slide effect

        transform : {

            translate : 'Y',                       // 'X'|'Y'|'XY'|'none'

            scale : [1, 1],                       // [scalefrom, scaleto]

            rotate : [0, 0]                       // [rotatefrom, rotateto]

        },

        opacity : [0, 1]                           // [opacityfrom, opacityto]

    },

    mode : 'wheel,touch',               // mode of fullpage

    easing : 'ease',                                // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] )

    // callback : function(index, thisPage) {

    //     index = index + 1 > 3 ? 0 : index + 1;

    //     autoPlay(index);

    // }

});

// interval = setTimeout(function() {

//     runPage.go(runPage.thisPage() + 1);

// }, 5000);

</script>

</html>

demo

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

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

    设计滑屏框架的办法一般有2种 控制父容器法 控制子容器法 这个算是控制父容器法 通过控制父容器的transform: translateY或margin-top或top的值来上下滑动页面,每次的位移的 ...

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

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

  3. 结合源码浅谈Spring容器与其子容器Spring MVC 冲突问题

    容器是整个Spring 框架的核心思想,用来管理Bean的整个生命周期. 一个项目中引入Spring和SpringMVC这两个框架,Spring是父容器,SpringMVC是其子容器,子容器可以看见父 ...

  4. Spring - 父容器与子容器

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

  5. CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

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

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

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

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

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

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

  9. Dynamic CRM 2013学习笔记（十八）根据主表状态用JS控制子表自定义按钮

    有时要根据主表的审批状态来控制子表上的按钮要不要显示,比如我们有一个需求审批通过后就不能再上传文件了. 首先打开Visual Ribbon Editor, 如下图,我们可以利用Enable Rules ...

随机推荐

  1. java中System.getenv和System.getProperties的区别

    System.getenv获取的是系统的环境变量(就是用户在操作系统中设置的环境变量),windows和linux下环境变量的设置就不说了哦. System.getProperties获取的是系统的相 ...

  2. [原创]基于rsync算法的目的性改进-RexSync

    rsync是一种文件差异传输的算法,特点是高效且相似块识别率较高.具体算法这边就不赘述,网上很多,官方文档也描述的很清楚. rsync提高文件比对效率的一个核心算法之一就是rolling checks ...

  3. Ubuntu下的生活--安装

    概要 整个安装过程是通过离线包安装,而非在线安装. 目录 JDK安装与配置 Eclipse安装与配置 Apache安装与配置 MySQL的安装 JDK安装与配置 版本:jdk-7u71-linux-i ...

  4. 【转】天啦噜！原来Chrome自带的开发者工具还能这么用！(提升JS调试能力的10个技巧)

    天啦噜!原来Chrome自带的开发者工具还能这么用! (提升JS调试能力的10个技巧)   Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript ...

  5. plain framework 1（简约框架）一款主要用于网络（游戏）开发的C/C++框架 即将开源发布

    在我们的日常开发中,我们往往会遇到这种情况,当我们换了一个开发环境时很可能会重新利用一套新的框架进行开发.由于不同框架有着不同的接口,所以我们不得不花时间再次熟悉这些接口,这将造成开发时间上的重复,而 ...

  6. [ZZ]From QA to Engineering Productivity

    http://googletesting.blogspot.com/2016/03/from-qa-to-engineering-productivity.html In Google’s early ...

  7. ajax获取数据的形象比喻，助于理解记忆

    过程 创建对象(打开浏览器) 连接服务器(输入网址) 发送请求(按下回车) 服务器接收并返回数据(显示对应的网址网站内容) 原理

  8. 通过实战理解C语言精要——函数篇

      前言 本篇博客是对C语言函数部分的重点内容和细枝末节通过实战得到的经验的总结精炼,不涵盖C语言函数的全部内容,所有提炼内容均来自提炼与实战,阅读需要对函数部分有一定基础,可用于对C语言函数的理解提 ...

  9. C#-WinForm-发送邮件

    进入邮箱→打开设置→变为启用状态 发送前准备:发件人.发件人密码.收件人.标题.内容 在<发送>按钮中设置事件 一.引用 System.Net; 和 System.Net.Mail; 命名 ...

  10. bzoj3731: Gty的超级妹子树

    一代神题啊orz(至少是以前年代的神题吧) 块状树 复杂度nsqrtnlogn 真是exciting 还没有卡时限 话不多说直接上代码 (最近解锁了记事本写代码的技能...感觉越来越依赖OJ调试了.. ...