• jQuery.fullpage自定义高度(demo详解)


    从问题说起,项目终于到的实际问题:

       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>
    

      

  • 相关阅读:
    C#24种设计模式汇总
    传智播客C++视频学习笔记(5)
    传智播客C++视频学习笔记(3)
    传智播客C++视频学习笔记(1)
    Learning hard 网络编程
    Learning hard 学习笔记
    男人和女人 访问者模式
    其实你不懂老板的心 解释器模式
    项目多也别傻做 享元模式
    git常用命令
  • 原文地址:https://www.cnblogs.com/haijson/p/6783228.html
Copyright © 2020-2023  润新知