技术选型

html5 css3 jq

应用的插件

FullPage.js

一、建一个测试页面，测试静态的功能

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8"/>

    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

    <title>慕课网2015课程学习情况</title>

    <style>

        body{

            margin:0;

            padding:0;

        }

        .component{

            width: 50%;

            height:50px;

            margin-bottom:20px;

            background-color: red;

            display: none;

        }

    </style>

    <body>

    <!-- 用于验证 fullpage.js 切换页面，以及内容组织结构可用，组件能够进行动画 -->

        <div id="h5">
　　<!-- 给每个需要翻页的页面添加section类 给定不同的ID -->

            <div class="page section" id="page-1">

                <div class="component">logo</div>

                <div class="component slogan">slogan</div>

            </div>

            <div class="page section" id="page-2">

                <div class="component">logo</div>

                <div class="component slogan">slogan</div>

            </div>

            <div class="page section" id="page-3">

                <div class="component">logo</div>

                <div class="component slogan">slogan</div>

            </div>

        </div>

    </body>

</html>

二、首先载入fullpage.js

　　 <script type="text/javascript" src="../js/lib/jquery.js"></script>

    <script type="text/javascript" src="../js/lib/jquery-ui.min.js"></script>

    <script type="text/javascript" src="../js/lib/jquery.fullPage.js"></script>

三、测试功能是否完好。

$(function (){

            $('#h5').fullpage({

                    //传入背景色 sectionsColor 后面接对象。

                    'sectionsColor': ['#254875', '#00ff00', '#245874'],

                    /*

                    * 传入回掉函数 onLeave afterLoad

                    * afterLoad

                    * 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，

                    * anchorLink 是锚链接的名称，index 是序号，从1开始计算

                    * onLeave

                    * 滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：

                    * index 是离开的“页面”的序号，从1开始计算；

                    * nextIndex 是滚动到的“页面”的序号，从1开始计算；

                    * direction 判断往上滚动还是往下滚动，值是 up 或 down。

                    * */

                    onLeave: function (index, nextIndex, direction) {

                        //让page执行onLeave事件。

                        $('#h5').find('.page').eq(index-1).trigger('onLeave');

                    },

                    afterLoad: function (anchorLink, index) {

                        //让page执行onLoad事件。

                        $('#h5').find('.page').eq(index-1).trigger('onLoad');

                    },

                });

             //给page页面绑定onLeave事件。

            $('.page').on('onLeave',function () {

                console.log($(this).attr('id'),'====>','onleave');

                //让component执行onLeave事件。

                $(this).find('.component').trigger('onLeave');

            })

            //给page页面绑定onLoad事件。

            $('.page').on('onLoad',function () {

                console.log($(this).attr('id'),'====>','onLoad');

                //让component执行onLoad事件。

                $(this).find('.component').trigger('onLoad');

            })

            //给component页面绑定onLoad事件。

            $('.component').on('onLoad',function () {

                $(this).fadeIn();

                //防止事件冒泡。循环传播。

                return false;

            })

            //给component页面绑定onLeave事件。

            $('.component').on('onLeave',function () {

                $(this).fadeOut();

                return false;

            })

        });

web组件化开发第一天的更多相关文章

  1. 从徐飞的文章《Web应用的组件化开发（一）中窥视web应用开发的历史

    Web应用的组件化开发(一) 原文来自 徐飞 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追 ...

  2. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  3. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

  4. vue组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

  5. 漫谈Nuclear Web组件化入门篇

    目前来看,团队内部前端项目已全面实施组件化开发.组件化的好处太多,如:按需加载.可复用.易维护.可扩展.少挖坑.不改组件代码直接切成服务器端渲染(如Nuclear组件化可以做到,大家叫同构)... 怎 ...

  6. 前端笔记之JavaScript面向对象（四）组件化开发&轮播图|俄罗斯方块实战

    一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...

  7. vue（9）—— 组件化开发 - webpack（3）

    前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...

  8. AppBoxFuture(六): 前端组件化开发

      前面几篇都是在介绍结构化与非结构化的数据存储,本篇换换口味介绍一下框架是如何实现前端组件化开发的.首先得感谢Vue.ElementUI等优秀的前端开源项目,这些项目帮助作者快速实现了框架的两个前端 ...

  9. atitit.  web组件化原理与设计

    atitit.  web组件化原理与设计 1. Web Components提供了一种组件化的推荐方式,具体来说,就是:1 2. 组件化的本质目的并不一定是要为了可复用,而是提升可维护性. 不具有复用 ...

随机推荐

  1. composer update 或者 composer install提示killed解决办法

    出现此原因大多因为缓存不足造成,在linux环境可增加缓存解决. free -mmkdir -p /var/_swap_cd /var/_swap_#Here, 1M * 2000 ~= 2GB of ...

  2. Dubbo监控中心搭建-dubbo-monitor-simple的使用

    场景 Dubbo环境搭建-管理控制台dubbo-admin实现服务监控: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10362 ...

  3. 6_4 破损的键盘（UVa11988）<链表>

    你用了一个有点坏掉的键盘打字,该键盘会自动按下”Home”键与“End”键,直到打完整个内容以前,你都没有发现到这个问题.本题给定键盘输出的字串(包含Home与End),请你输出该字串在屏幕显示的内容 ...

  4. android开发基础（ViewModel）

    今天学习了ViewModel,其是Jetpack的一个类,它可以将界面中的数据独立出来,这样不会造成页面上信息的丢失. 我跟着视频做了一个简单的实例: 首先创建项目的时候它和以往的项目会有些不一样,因 ...

  5. BZOJ-1563-郁闷的出纳员（权值线段树）

    偏移量要考虑清楚. #include <bits/stdc++.h> using namespace std; const int N=4e5+10; const int BASE=1e5 ...

  6. 《实战Java高并发程序设计》读书笔记六

    第六章 Java 8 与并发 1.函数式编程 函数作为一等公民: 将函数作为参数传递给另外一个函数这是函数式编程的特性之一. 函数可以作为另外一个函数的返回值,也是函数式编程的重要特点. 无副作用: ...

  7. Apache Shiro——初识

    Shrio是什么? Shrio是一个用Java开发的安全框架,用来保证系统或系统数据安全的.他可以用在大多数程序上,比如移动应用程序.Web程序或者大型的企业应用程序等. Shrio能干什么? 能用来 ...

  8. 【Python 多进程】

    " 一.模块介绍 multiprocess模快 仔细说来,multiprocess不是一个模块,而是python中的一个操作.管理进程的包,之所以叫multi是取自multiple的多功能的 ...

  9. java处理节假日和工作时间的工具类

    import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.ArrayList; impo ...

  10. [WC2018]即时战略（LCT，splay上二分）

    [UOJ题面]http://uoj.ac/problem/349 一道非常好的与数据结构有关的交互题. 首先先看部分分做法, 一上来我们肯定得钦定一个 \(explore\) 的顺序,直接随机就好. ...