jQuery.fullpage自定义高度（demo详解）

最新推荐文章于 2021-12-18 16:27:31 发布

weixin_30396699

最新推荐文章于 2021-12-18 16:27:31 发布

阅读量488

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/haijson/p/6783228.html

版权

从问题说起，项目终于到的实际问题：

1、angular单页应用运用了2个jQuery.fullpage全屏滚动，运用路由单页有冲突，分页器中id固定fp-nav，分页器重复添加

2、jQuery.fullpage自定义footer的高度，每个滚动页面被固定高度很烦，滚动较小的高度，任然全屏滚出

解决问题1：

针对第一个问题，会出现重复初始化fullpage问题，由于使用的angular单页应用,所以jQuery不可避免，于是选择更好与angular搭配的angular-fullpage运用插件解决，很不错（下篇详解angular-fullpage用法）

解决问题2：

毫无疑问查文档是最好解决插件问题的方式，其他真的浪费时间。

gitHub详细文档（fullpage.js）

其中有详细的说明【Creating smaller or bigger sections】并附有demo

看着 demo 写了个例子，不过忘加 jquery.fullpage.min.css导致出现错误

详细例子如下（引入文件自己找对位置）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src='libs/jquery/jquery-1.11.3.min.js'></script>
  <script type="text/javascript" src='libs/jquery/jquery.fullPage.min.js'></script>
  <link rel="stylesheet" type="text/css" href="libs/jquery/jquery.fullpage.min.css">
</head>
<body>
	<div id="fullpage">
    <div class="section">One</div>
    <div class="section">Two</div>
    <div class="section">
       three
    </div>
    <div class="section fp-auto-height">
      <div class="content">Four</div>
    </div>
  <style type="text/css">
  	.section {
         text-align:center;
          font-size: 3em;
  }
  </style>
  <script type="text/javascript">
  	   $('#fullpage').fullpage({
          anchors: ['page1', 'page2', 'page3', 'page4'],
          sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
        });
  </script>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/haijson/p/6783228.html

weixin_30396699

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery.fullpage自定义高度（demo详解）

从问题说起，项目终于到的实际问题： 1、angular单页应用运用了2个jQuery.fullpage全屏滚动，运用路由单页有冲突，分页器中id固定fp-nav，分页器重复添加 2、jQuery.fullpage自定义footer的高度，每个滚动页面被固定高度很烦，滚动较小的高度，任然全屏滚出解决问题1：针对第一个问题，会出现重复初始化fullpage问题，由于使用...
复制链接

扫一扫