web组件化开发第一天
2024-09-05 19:54:56
技术选型
html5 css3 jq
应用的插件
一、建一个测试页面,测试静态的功能
<!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;
}) });
最新文章
- js 也来 - 【拉勾专场】抛弃简历!让代码说话!
- android 获取Datepicker日期
- Effective Java
- 从Eclipse迁移到Android Studio
- Excel应该这么玩——4、命名区域:搞定下拉框
- 使用 Aspose.Slide 获取PPT中的所有幻灯片的标题
- JAVA 想让类无法new,可以使用private将类的构造函数改为私有的,这样new的时候就会报错了
- 6-Highcharts曲线图之带标识
- dsPIC33EP timer1 初始化设置及应用
- OC多文件开发介绍
- 【转】Javabyte[]数组和十六进制String之间的转换Util------包含案例和代码
- centos6.5+Django+mysql+nginx+uwsgi
- iOS之NSDictionary和NSArray以及NSMutableDictionary和NSMutableArray:将不再是问题
- Openstack &; Ansible
- Cesium剖面分析
- SSH 之 Spring的源码(一)——Bean加载过程
- SpringBoot 常用注解
- Spark源码剖析 - SparkContext的初始化(三)_创建并初始化Spark UI
- es6学习笔记入门总结
- Win10系列:JavaScript写入和读取文件
热门文章
- WPscan扫描工具安装使用
- 一文搞懂vim复制粘贴
- Django - 后台admin不显示带auto_now, auto_now_add选项的字段
- springboot 框架 - 探究-pom文件
- Bugku-CTF加密篇之zip伪加密(flag.zip)
- Bugku-CTF加密篇之奇怪的密码(突然天上一道雷电 gndk€rlqhmtkwwp}z )
- python中的while
- 科技 - 5G
- Go之Cookie和Session
- 【STM32H7教程】第56章 STM32H7的DMA2D应用之刷色块,位图和Alpha混合