Demo - fullpage：http://a-1.vip/demo/fullpage
```
$.fn.extend({
myfullpage: function(dataObj) {
this.each(function(index, ele) {
var _this = $(ele);
dataObj.time = dataObj.time || 1000;
var outerHeight = $(window).outerHeight(),
outerWidth = $(window).outerWidth();
$('html,body').css({
position: 'relative',
overflow: 'hidden',
width: '100%',
height: '100%',
margin: 0
});
var section = _this.css({
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
}).find('.section').css({
position: 'relative',
width: '100%',
height: '100%',
});
section.each(function(index, ele) {
$(ele).css({
backgroundColor: dataObj.colorArray[index]
});
var len = $(ele).find('.slide').css({
position: 'relative',
width: outerWidth,
height: outerHeight,
float: 'left',
}).length;
if (len) {
var slideAll = $(ele).find('.slide')
.wrapAll('<div class="slideAll">').closest('.slideAll')
.css({
position: 'absolute',
top: 0,
left: 0,
width: outerWidth * len,
htight: outerHeight,
});
}
});
section.eq(0).addClass('active');
section.each(function(index, ele) {
$(ele).find('.slide').eq(0).addClass('innerActive');
});
var curIndex = 0,
lock = true,
direction = null;
$(document).on('keydown', function(e) {
// left == 37 top == 38 right == 39 bottom == 40
if (lock) {
if (e.keyCode == 38 || e.keyCode == 40) {
var newTop = _this.offset().top;
// top/bottom
if (e.keyCode == 38 && curIndex != 0) {
direction = 'top';
typeof(dataObj.onLeave) === 'function' && dataObj.onLeave(curIndex, direction);
curIndex--;
newTop += outerHeight;
} else if (e.keyCode == 40 && curIndex != section.length - 1) {
direction = 'bottom';
typeof(dataObj.onLeave) === 'function' && dataObj.onLeave(curIndex, direction);
curIndex++;
newTop -= outerHeight;
} else {
lock = true;
return;
}
lock = false;
_this.animate({
top: newTop + 'px'
}, dataObj.time, 'easeInBack', function() {
_this.css({
top: newTop + 'px'
});
section.removeClass('active').eq(curIndex).addClass('active');
lock = true;
typeof(dataObj.afterLoad) === 'function' && dataObj.afterLoad(curIndex, direction);
});
}
// var innerActiveIndex = innerActive.index();
if (e.keyCode == 37 || e.keyCode == 39) {
var slideAll = _this.find('.active .slideAll'),
slide = _this.find('.active .slide'),
inActIndex = _this.find('.active .innerActive').index();
if (inActIndex == -1) {
return;
}
// left/slide
var newLeft = slideAll.offset().left;
if (e.keyCode == 37 && inActIndex > 0) {
direction = 'left';
typeof(dataObj.onLeave) === 'function' && dataObj.onLeave(inActIndex, direction);
inActIndex--;
newLeft += outerWidth;
} else if (e.keyCode == 39 && inActIndex != slide.length - 1) {
direction = 'right';
typeof(dataObj.onLeave) === 'function' && dataObj.onLeave(inActIndex, direction);
inActIndex++;
newLeft -= outerWidth;
} else {
lock = true;
return;
}
lock = false;
slideAll.animate({
left: newLeft + 'px'
}, dataObj.time, 'easeInBack', function() {
slideAll.css({
left: newLeft + 'px'
});
slide.removeClass('innerActive').eq(inActIndex).addClass('innerActive');
lock = true;
typeof(dataObj.afterLoad) === 'function' && dataObj.afterLoad(inActIndex, direction);
});
}
}
})
_this.fadeIn(dataObj.time);
});
return this;
},
// 该自定义插件可以根据数组、对象构建/配置指定元素标签、
createDom: function(data) {
if (typeof(data) != 'object') {
console.log('类型错误！！createDom(data) data 可以传两种类型，[]、{}');
return this;
}
// data 可以传两种类型，[]、{}
data = $.type(data) == 'array' ? data : [data];
this.each(function(index, _this) {
var _this = $(_this);
var $div = null;
var reg = /</g;
data.forEach(function(ele, index) {
// 判断 创建 / 选择已有元素、
$div = reg.test(ele.type) ? $(ele.type) : $(ele.type, _this);
ele.text && $div.text(ele.text);
ele.class && $div.addClass(ele.class);
ele.css && $div.css(ele.css);
ele.event && $div.on(ele.event);
// 回调函数提供接口调用能力、
typeof(ele.adjustFn) === 'function' && ele.adjustFn($div);
if (ele.dom) {
ele.dom = $.type(ele.dom) == 'array' ? ele.dom : [ele.dom];
ele.dom.forEach(function(e, i) {
$div.createDom(e);
});
};
_this.append($div);
});
});
return this;
}
});
```
- 前端工具库
- HTML
- CSS
- 实用样式
- JavaScript
- 模拟运动
- 深入数组扩展
- JavaScript_补充
- jQuery
- 自定义插件
- 网络 · 后端请求
- css3.0 - 2019-2-28
- 选择器
- 边界样式
- text 字体系列
- 盒子模型
- 动图效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 画布
- SVG - 矢量图
- 多媒体类
- H5 - 其他
- webpack - 自动化构建
- webpack - 起步
- webpack -- 环境配置
- gulp
- ES6 - 2019-4-21
- HTML5补充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 页面配置
- 组件生命周期
- 自定义组件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定义功能 - 2019-7-20
- 自定义组件 - 2019-7-22
- 脚手架的使用 - 2019-7-25
- vue - 终端常用命令
- Vue Router - 路由 (基础)
- Vue Router - 路由 (高级)
- 路由插件配置 - 2019-7-29
- 路由 - 一个实例
- VUEX_数据仓库 - 2019-8-2
- Vue CLI 项目配置 - 2019-8-5
- 单元测试 - 2019-8-6
- 挂载全局组件 - 2019-11-14
- React框架
- React基本使用
- React - 组件化 2019-8-25
- React - 组件间交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props属性校验 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能优化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模块收纳
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基础 2020-3-6
- TypeScript - 进阶 2020-3-9
- Ordinary小助手
- uni-app
- 高德地图api
- mysql
- EVENTS
- 笔记