-
下载地址：github.com/dengzemiao/… 支持 Vue 以及 npm 导入。
-
可用于做Web网页分段页面动态添加展示动画，兼容了IE9及以上版本
-
可用于做类似这样的分页需求且每页都需要到指定位置或者显示出来之后增加动画效果的需求：
- demo 效果：
- 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清空原样式 */
html, body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<!-- 分页指定DOM -->
<div id="full-page">
<!-- 页 -->
<div style="width: 100%; height: 300px; background-color: yellow;"></div>
<!-- 页 -->
<div style="width: 100%; padding: 10px; margin: 10px; background-color: orange;">
<div style="height: 100px;"></div>
</div>
<!-- 页 -->
<div style="width: 100%; background-color: red;">
<div style="height: 100px; padding: 10px; margin: 10px;"></div>
</div>
<!-- 页 -->
<div style="width: 100%; height: 300px; background-color: blue;"></div>
<!-- 页 -->
<div style="width: 100%; height: 300px; background-color: blueviolet;"></div>
<!-- 页 -->
<div style="width: 100%; height: 300px; background-color: yellowgreen;"></div>
</div>
<!-- 导入插件 -->
<script src="./fullPage.js"></script>
<script>
// 获取需要进行监听分页的DOM
var target = document.getElementById('full-page')
// 监听页码
fullPage(target, {
// 获取每个子元素头部出现多少可见区域才算可见（小于1: 按子元素本身高度的百分比计算px, 大于1: 按px进行计算，默认为0）
// callbackVisibleHeaderScales: function (index, rect) {
// // 按px传入
// // return 10
// // 按比例传入
// return 0.2
// },
// 获取每个子元素尾部出现多少可见区域才算可见（小于1: 按子元素本身高度的百分比计算px, 大于1: 按px进行计算，默认为0）
// callbackVisibleFooterScales: function (index, rect) {
// // 按px传入
// // return 10
// // 按比例传入
// return 0.2
// },
// 回调函数 - 返回可见子元素列表
// callbackVisibles: function (visibleIndexs, childrens) {
// console.log(visibleIndexs, childrens)
// },
// 回调函数 - 子元素首次显示回调，之后重复显示将不再回调
// callbackVisiblesOnce: function (index, isVisible, childrens) {
// console.log(index, isVisible, childrens[index])
// },
// 回调函数
callback: function (index, isVisible, visibleIndexs, childrens) {
console.log(index, isVisible, visibleIndexs, childrens[index])
}
})
</script>
</body>
</html>
