浅谈jquery fullpage 插件增加头部和版权的方法
时间:2019-04-13
本文章向大家介绍浅谈jquery fullpage 插件增加头部和版权的方法,主要包括浅谈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; }
小结
你的问题可能早就被人遇到了,一定有人给你解决过的。善于利用搜索引擎即可。
以上这篇浅谈jquery fullpage 插件增加头部和版权的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- JUC包下的CountDownLatch,CyclicBarrier,Semaphore
- java队列,ArrayBlockingQueue
- 多线程使用wait和notify做生产者消费者模型导致线程全部假死
- 偏执的iOS逆向研究员:收集全版本的macOS iOS+越狱+内核调试
- java 多线程暂停与恢复:suspend,resume
- ArrayList底层实现
- Master-work模式
- Condition控制线程通信:java三个线程循环打印ABC
- java根据wait,notify,synchronize关键字自定义队列
- ActiveMQ几个重要的配置文件
- TiDB 在 Ping++ 金融聚合支付业务中的实践
- 设计模式之装饰模式
- JVM之垃圾回收
- java如何根据二进制流确定图片的类型
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 获取python运行输出的数据并解析存为dataFrame实例
- 如何使用Cython对python代码进行加密
- PHP快速排序算法实现的原理及代码详解
- 从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
- keras实现VGG16 CIFAR10数据集方式
- PyTorch: Softmax多分类实战操作
- 为什么称python为胶水语言
- opencv 图像礼帽和图像黑帽的实现
- python文件及目录操作代码汇总
- 使用pyplot.matshow()函数添加绘图标题
- 如何卸载python插件
- Keras实现支持masking的Flatten层代码
- 用opencv给图片换背景色的示例代码
- 解决Keras 自定义层时遇到版本的问题
- Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法