jquery fullpage插件如何操作头部与尾部

这次给大家带来jquery fullpage插件如何操作头部与尾部,jquery fullpage插件操作头部与尾部的注意事项有哪些,下面就是实战案例,一起来看一下。

前言

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

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

实现其实只需要 html 部分

这里写头部

page1

page2

page3

page4

这里写版权

登录后复制

如上,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

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

去除vue中代码规范检测方法总结

Vue.js+Flask构建一个单页APP案例详解(附代码)

Vue实现图片轮播组件教程详解

以上就是jquery fullpage插件如何操作头部与尾部的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2763028.html

(0)
上一篇 2025年3月8日 10:05:43
下一篇 2025年2月24日 12:31:41

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • jQuery替换节点元素步骤详解

    这次给大家带来jQuery替换节点元素步骤详解,jQuery替换节点元素的注意事项有哪些,下面就是实战案例,一起来看一下。 替换节点元素的操作,实现动态页面的,代码如下 中国 $(document).ready(function () { …

    2025年3月8日
    200
  • jquery拖动文件上传加载添加进度条

    这次给大家带来jquery拖动文件上传加载添加进度条,jquery拖动文件上传加载添加进度条的注意事项有哪些,下面就是实战案例,一起来看一下。 //进度条 0% //要拖动到的地方 登录后复制 js: var dz = $(‘#main_c…

    编程技术 2025年3月8日
    200
  • jQuery里each方法使用案例

    这次给大家带来jQuery里each方法使用案例,jQuery里each方法使用的注意事项有哪些,下面就是实战案例,一起来看一下。 概述:   each() 方法规定为每个匹配元素规定运行的函数。   返回 false 可用于及早停止循环,…

    编程技术 2025年3月8日
    200
  • JS字符串的操作详解

    这次给大家带来JS字符串的操作详解,JS字符串操作的注意事项有哪些,下面就是实战案例,一起来看一下。 charAt()            获取字符串中特定索引处的字符; toupperCase()  将字符串的所有字符转换成大写字母; …

    编程技术 2025年3月8日
    200
  • jQuery实现上传之前本地预览图片

    这次给大家带来jQuery实现上传之前本地预览图片,jQuery实现上传之前本地预览图片的注意事项有哪些,下面就是实战案例,一起来看一下。 www.jb51.net jquery上传图片本地预览效果$(‘#upload’).change(f…

    2025年3月8日
    200
  • JS DOM元素常见增删改查操作详解

    这次给大家带来JS DOM元素常见增删改查操作详解,JS DOM元素常见增删改查操作的注意事项有哪些,下面就是实战案例,一起来看一下。 DOM概念 DOM(Document Object Model):文档对象模型。 通过开发者工具的Ele…

    编程技术 2025年3月8日
    200
  • jquery判断元素内容是否存在

    这次给大家带来jquery判断元素内容是否存在,jquery判断元素内容是否存在的注意事项有哪些,下面就是实战案例,一起来看一下。 input 用val(); var value = $(‘#test’).val()…

    2025年3月8日 编程技术
    200
  • jQuery做出循环时间自动更换样式功能

    这次给大家带来jQuery做出循环时间自动更换样式功能,jQuery做出循环时间自动更换样式的注意事项有哪些,下面就是实战案例,一起来看一下。 js核心代码部分: $(document).ready(function(){ // 皮肤列表选…

    编程技术 2025年3月8日
    200
  • vue+vue-router+vuex操作权限

    这次给大家带来vue+vue-router+vuex操作权限,vue+vue-router+vuex操作权限的注意事项有哪些,下面就是实战案例,一起来看一下。 基于vuex, vue-router,vuex的权限控制教程,完整代码地址见 h…

    2025年3月8日
    200
  • jquery实现元素平面移动

    这次给大家带来jquery实现元素平面移动,jquery实现元素平面移动的注意事项有哪些,下面就是实战案例,一起来看一下。 最近再做报表时候,直接把全部字段都导出了,但这不太灵活。回忆老师讲过的项目做报表如下左右上下移功能灵活控制,所以就尝…

    2025年3月8日
    200

发表回复

登录后才能评论