控制子容器法

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

这里采用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. 4412开发板学习笔记-NFS服务器的搭建

    转自iTOP-4412讨论群: http://www.topeetboard.com 先来介绍一下NFS: NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件 ...

  2. Android UI控件----ExpandableListView的基本用法

    ExpandableListView介绍 ExpandableListView的引入 ExpandableListView可以显示一个视图垂直滚动显示两级列表中的条目,这不同于列表视图(ListVie ...

  3. UVA - 1625 Color Length[序列DP 代价计算技巧]

    UVA - 1625 Color Length   白书 很明显f[i][j]表示第一个取到i第二个取到j的代价 问题在于代价的计算,并不知道每种颜色的开始和结束   和模拟赛那道环形DP很想,计算这 ...

  4. 第1章Java入门体验

    第1章Java入门体验 1.java简介和平台应用 Java是sun公司开发出来,现在属于ORACLE公司java分为几个部分:首先是最基础的Java SE部分,这部分是Java的基础知识,主要包括: ...

  5. RFID考试背诵

    简答题: 简述RFID标准多元化的原因: 由不同的技术因素.利益因素导致: 工作频率分布在低频至微波的多个频段中,频率不同,技术差异大. 作用距离的差异导致标准不同:因为应答器分为有源.无源两种工作方 ...

  6. Linux下快速迁移海量文件的操作记录

    有这么一种迁移海量文件的运维场景:由于现有网站服务器配置不够,需要做网站迁移(就是迁移到另一台高配置服务器上跑着),站点目录下有海量的小文件,大概100G左右,图片文件居多.目测直接拷贝过去的话,要好 ...

  7. AFNetWorking3.0源码分析

    分析: AFNetWorking(3.0)源码分析(一)——基本框架 AFNetworking源码解析 AFNetworking2.0源码解析<一> end

  8. Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds...

    仰天长啸   Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds... 当启动tomcat时候出现 ...

  9. 如何删除datatable中的一行数据

    在C#中,如果要删除DataTable中的某一行,大约有以下几种办法: 1,使用DataTable.Rows.Remove(DataRow),或者DataTable.Rows.RemoveAt(ind ...

  10. 点击弹出li所在的序列号

    最近在研究一个图片替换功能,及点击左侧商品在右侧弹出层修改图片后,同时左侧的图片也得跟着修改. 我原来考虑的添加ID作为唯一值.但当ID重复了,替换就出BUG了. 最后问公司同事,然后给提供了 根据点 ...