DZMFullPage - 前端分页动画插件，兼容IE9+，支持Vue

最新推荐文章于 2022-11-11 11:22:15 发布

卡尔特斯

最新推荐文章于 2022-11-11 11:22:15 发布

阅读量183

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/zz00008888/article/details/109024645

版权

JavaScript 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

下载地址：https://github.com/dengzemiao/DZMFullPage 支持 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>

卡尔特斯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
DZMFullPage - 前端分页动画插件，兼容IE9+，支持Vue

下载地址：https://github.com/dengzemiao/DZMFullPage 支持 Vue 以及 npm 导入。可用于做Web网页分段页面动态添加展示动画，兼容了IE9及以上版本可用于做类似这样的分页需求且每页都需要到指定位置或者显示出来之后增加动画效果的需求：demo 效果：使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g..
复制链接

扫一扫