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
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request