浅谈jquery fullpage 插件增加头部和版权的方法

前言

一个页面，我们通过 jquery-fullpage 插件来制作，整个是全屏滚动的。但是，我们希望在最后一页增加一个版权，大概只有 100px 高，而不需要一个全屏来放版权。怎么做呢？搜索了一下，说了各种方法。什么修改源码啦之类的，或者自己写代码判断啦。晕死。其实，官方给出了解决方案。

下面，我们简单的说下是怎么实现的

实现其实只需要 html 部分

<div class="fullpage">
 <div class="section fp-auto-height">这里写头部</div>
 <div class="section">page1</div>
 <div class="section">page2</div>
 <div class="section">page3</div>
 <div class="section">page4</div>
 <div class="section fp-auto-height">这里写版权</div>
</div>

如上，js代码就不说了，只要你能跑起来，就没有问题。这里只需要给头部和底部增加一个fp-auto-height 的 class 即可。

没有生效吗？

嘿嘿，那是因为你只引用了js，而没有引用css造成的，只要引用下面的css即可。

https://github.com/alvarotrigo/fullPage.js/blob/master/dist/jquery.fullpage.css

其实关键代码只是下面的而已

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
 height: auto !important;
}

.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
 height: auto !important;
}

小结

你的问题可能早就被人遇到了，一定有人给你解决过的。善于利用搜索引擎即可。

fullpage github

以上这篇浅谈jquery fullpage 插件增加头部和版权的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 全屏滚动插件fullPage.js使用实例解析

    全屏滚动插件fullPage.js使用实例解析

    如今我们经常能看见到全屏网站,尤其是国外玩站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.而JQuery的一款插件fullpage.js,可以实现全屏滚动,非常流行的效果,兼容性IE8+兼容性不错,能够兼容多种浏览器. 主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个会调函数 支持手机.平板触摸事件 支持CSS3动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 准备工作(下载jquery

  • jQuery插件fullPage.js实现全屏滚动效果

    jQuery插件fullPage.js实现全屏滚动效果

    本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示  的HTML 布局 以及js 代码 //需要连接 连接的三个文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> //css文件 <script src="js/jquery-1.8.3.min.js"></script> //jQue

  • 浅谈jquery fullpage 插件增加头部和版权的方法

    前言 一个页面,我们通过 jquery-fullpage 插件来制作,整个是全屏滚动的.但是,我们希望在最后一页增加一个版权,大概只有 100px 高,而不需要一个全屏来放版权.怎么做呢?搜索了一下,说了各种方法.什么修改源码啦之类的,或者自己写代码判断啦.晕死.其实,官方给出了解决方案. 下面,我们简单的说下是怎么实现的 实现其实只需要 html 部分 <div class="fullpage"> <div class="section fp-auto-h

  • 浅谈jQuery中对象遍历.eq().first().last().slice()方法

    浅谈jQuery中对象遍历.eq().first().last().slice()方法

    eq(index):将集合中的索引为index的元素提取出来. first():返回集合中的第一个元素. .last():防护集合中的最后一个元素. .slice(start[,end]):返回集合中的给定区间段的元素. first()和last()调用eq(),eq()通过slice()实现,slice()通过 .pushStack()实现. 相关源码 285行:用法很奇特,通过一个"+"把可能为字符串的i转换成一个数值. 300~301:先借用数组方法slice()从当前jQuer

  • 浅谈jQuery animate easing的具体使用方法(推荐)

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: •properties:一组包含作为动画属性和终值的样式属性和及其值的集合 •duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

  • 浅谈jQuery为哪般去掉了浏览器检测

    由于做HTML5相关的项目,许多前卫时髦的前端技术就需要考虑一下IE是否支持.要是在以前,可以很方便地调用jQuery的jQuery.browser来实现. If(jQuery.browser.msie) alert("DIE IE!") 但这一便利在jQuery 1.9之后就不复存在了.突然觉得像失去了一个最亲密的战友,一个我一搞开发就离不开的好基友,一个我离开了就 无法写出跨浏览器的前端代码的好工具.一下子我竟不知道该如何是好. 然后每次需要考虑IE的时候,我就会去google一下

  • 浅谈jquery中的each方法$.each、this.each、$.fn.each

    jquery.each 方法 方法一 $("img").each(function(i,elem){ // i 下标 从零开始, // elem == this // $(elem).toggleClass("example"); $(this).toggleClass("example"); }); 方法二 $.each([1,2,3,4],function(){ //$(this)==数组中的每一个数组(如果数组是对象,就是对象) }); 方

  • 浅谈jQuery before和insertBefore的区别

    jQuery 中利用before和insertBefore可以达到在指定元素前插入指定内容,写法上有区别 先看一个例子: 在<div class='div1'>div1</div>前面插入<div>toInsertContent</div> 实现: $('<div>toInsertContent</div>').insertBefore($('.div1')); 或者 $('.div1').before('<div>toI

  • 浅谈jQuery中的$.extend方法来扩展JSON对象

    $.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); 结果 set

  • 浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用

    • 依赖的脚本文件 <script src="../Javascript/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="../Javascript/jquery.form.js" type="text/javascript"></script> • ajaxSubmit 和ajaxForm区

  • 浅谈jQuery hover(over, out)事件函数

    hover(over, out)事件函数 当鼠标移动一个匹配的元素上面,会触发指定的第一个函数 当鼠标移出这个元素时,会触发指定的第二个函数 over(function):鼠标移到元素上触发的函数 out(function):鼠标移出元素触发的函数 <nav class="main-nav"> <a href="/"><span>首页</span></a> <a href="/about&q

  • 浅谈jQuery中事情的动态绑定

    在jQuery的开发过程中,我们往往需要处理各种事件,例如click(),hover()等.在jQuery的API中,我们可以使用不同的方法来将这些事件绑定到特定的元素中.今天这篇文章中,我们将要介绍如何使用bind(),on(),live()和delegate()方法来绑定特定的事件,什么情况下使用,什么情况下不适用它们.希望能够帮助大家更好的了解和使用jQuery的时间处理方法. 一.bind()方法 使用较早版本jQuery的教程或者应用中,我们往往使用bind()方法来将事件绑定到特定的

随机推荐