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


Posted in jQuery onMarch 20, 2018

前言

一个页面,我们通过 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 插件增加头部和版权的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
jQuery替换节点元素的操作方法
Mar 18 #jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 #jQuery
jQuery中each方法的使用详解
Mar 18 #jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 #jQuery
JQuery选中select组件被选中的值方法
Mar 08 #jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 #jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 #jQuery
You might like
php绘制一个矩形的方法
2015/01/24 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
Selenium控制浏览器常见操作示例
2018/08/13 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
Python中Qslider控件实操详解
2021/02/20 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
客户代表自我评价范例
2013/09/24 职场文书
大学新生欢迎词
2014/01/10 职场文书
七年级地理教学反思
2014/01/26 职场文书
《长城》教学反思
2014/02/14 职场文书
高一学生评语大全
2014/04/25 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书