技术选型

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. 深入理解python(四)python基础知识之函数

    函数部分 函数部分大概想分成两个部分来讲,第一部分是关于对函数参数的介绍,第二部分是局部变量全局变量和内置变量也就是变量作用域的LGB原则 函数的参数 1.关于形参和实参的问题 第一点要注意的是pyt ...

  2. idea左侧出现日期和文件大小怎么关闭

    shift+alt+\

  3. 7、Maven插件

    什么是maven插件? maven 实际上是一类依赖插件执行的框架,每个任务实际上是由插件完成,Maven插件通常被用来 创建jar文件 创建war文件 编译代码文件 代码单元测试 创建工程文档 创建 ...

  4. HDU 4825 Xor Sum(字典树)

    嗯... 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4825 这道题更明确的说是一道01字典树,如果ch[u][id^1]有值,那么就向下继续查找/ ...

  5. vue中,实现锚点定位及跳转(url不发生变化)

    <div class="footer" @click="returnTop"> methods:{ returnTop:function(){ do ...

  6. 【代码总结】PHP之会话跟踪技术

    有些时候感觉自己学习的效率好低,一套教程一本书,反复听,反复看,反复敲代码.自学这条路真的是很艰难,在任何事情都没有成功之前都很枯燥乏味.自学的过程中总会遇到很多问题,有时候连错误的原因都找不出来,那 ...

  7. Mac 系统上有趣的插件

    1.微信小助手:https://github.com/TKkk-iOSer/WeChatPlugin-MacOS 作用:开启消息撤回拦截,设置自动回复,远程登录Mac,微信多开,免认证登录.... 2 ...

  8. Python图文识别技术【入门必学】

    Python图文识别技术分享 使用 tesseract-ORC 识别文字,识别率不算太高,需要自我训练 tessdata 数据,才能更精确的识别你想要让电脑认识出来的文字!ps:另外很多人在学习Pyt ...

  9. 二分查找及几种变体的Python实现

    1. 在不重复的有序数组中,查找等于给定值的元素 循环法 def search(lst, target): n = len(lst) if n == 0: return -1 low = 0 high ...

  10. UINavigationController+FDFullscreenPopGesture全屏回滑手势阅读理解

    滑动返回纯oc.纯swifthttps://github.com/Bonway/BBGestureBack UINavigationController+FDFullscreenPopGesture全 ...