前端页面整屏滚动fullpage.js简单使用
官网CSS,JS地址
fullPage.js/dist/fullpage.min.js at master · alvarotrigo/fullPage.js · GitHub
fullPage.js/dist/fullpage.min.css at master · alvarotrigo/fullPage.js · GitHub
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#fullpage .section {text-align: center;font-size: 2em;color: white;}#fullpage .section:nth-child(1) { background-color: #3498db; }#fullpage .section:nth-child(2) { background-color: #e74c3c; }#fullpage .section:nth-child(3) { background-color: #2ecc71; }#fullpage .section:nth-child(4) { background-color: pink; }
</style>
<body><div id="fullpage"><div class="section">第一屏</div><div class="section">第二屏</div><div class="section">第三屏</div><div class="section fp-auto-height">第四屏 fp-auto-height自定义高度</div></div><link rel="stylesheet" href="./fullpage.min.css"><script src="./fullpage.min.js"></script><script>var myFullpage = new fullpage('#fullpage', {navigation: true, // 显示导航点slidesNavigation: true, // 如果有横向滑动的面板,显示横向导航scrollingSpeed: 1000, // 滚动速度,单位为毫秒easing: 'easeInOutCubic', // 滚动动画的速度曲线css3: true // 使用 CSS3 transforms 进行滚动});</script>
</body></html>
效果图:

相关文章:
前端页面整屏滚动fullpage.js简单使用
官网CSS,JS地址 fullPage.js/dist/fullpage.min.js at master alvarotrigo/fullPage.js GitHub fullPage.js/dist/fullpage.min.css at master alvarotrigo/fullPage.js GitHub <!DOCTYPE html> <html lang"en"><head><meta charset"…...
JQuery基本介绍和使用方法
JQuery基本介绍和使用方法 W3C 标准给我们提供了⼀系列的函数, 让我们可以操作: ⽹⻚内容⽹⻚结构⽹⻚样式 但是原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们可以使⽤JQuery来操作⻚⾯对象. jQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 于20…...
【案例】旗帜飘动
开发平台:Unity 6.0 开发工具:Shader Graph 参考视频:Unity Shader Graph 旗帜飘动特效 一、效果图 二、Shader Graph 路线图 三、案例分析 核心思路:顶点偏移计算 与 顶点偏移忽略 3.1 纹理偏移 视觉上让旗帜保持动态飘动&a…...
大模型思维链推理的综述:进展、前沿和未来
转自公众号AIRoobt A Survey of Chain of Thought Reasoning: Advances, Frontiers and Future 思维链推理的综述:进展、前沿和未来 摘要:思维链推理,作为人类智能的基本认知过程,在人工智能和自然语言处理领域引起了极大的关注…...
项目一:使用 Spring + SpringMVC + Mybatis + lombok 实现网络五子棋
一:系统展示: 二:约定前后端接口 2.1 登陆 登陆请求: GET /login HTTP/1.1 Content-Type: application/x-www-form-urlencodedusernamezhangsan&password123登陆响应: 正常对象:正常对象会在数据库中存储&…...
openEuler 系统中 Samba 文件共享服务器管理(windows、linux文件共享操作方法)
一、Samba 简介 Samba 是在 Linux 和 Unix 系统上实现 SMB/CIFS 协议的一个免费软件,使得这些系统可以与 Windows 系统进行文件和打印机共享。通过 Samba,可以将 openEuler 系统配置为文件服务器,让 Windows、Linux 和其他支持 SMB/CIFS 协议…...
使用 Elasticsearch 进行语义搜索
Elasticsearch 是一款功能强大的开源搜索引擎,可用于全文搜索、分析和数据可视化。传统上,Elasticsearch 以其执行基于关键字/词汇的搜索的能力而闻名,其中文档基于精确或部分关键字匹配进行匹配。然而,Elasticsearch 已经发展到支…...
软考:中间件
中间件 中间件是一类位于操作系统软件与用户应用软件之间的计算机软件,它包括一组服务,以便于运行在一台或多台机器上的多个软件通过网络进行交互。 中间件的主要功能包括通信支持和应用支持。 通信支持为应用软件提供平台化的运行环境,屏蔽…...
银行家算法(Banker’s Algorithm)
银行家算法(Banker’s Algorithm)是计算机操作系统中一种避免死锁发生的著名算法。该算法由艾兹格迪杰斯特拉(Edsger Dijkstra)在1965年为T.H.E系统设计,其核心理念基于银行借贷系统的分配策略,以确保系统的…...
用魔数严谨的判别文件类型:杜绝上传风险
在文件处理和管理中,确定文件的类型是一个常见的需求。虽然文件扩展名可以提供一些信息,但并不总是可靠的。魔数(Magic Numbers)是一种更为准确的方法,通过检查文件开头的特定字节序列来识别文件类型。本文将介绍如何在…...
【MacOS实操】如何基于SSH连接远程linux服务器
MacOS上远程连接linux服务器,可以使用ssh命令pem秘钥文件连接。 一、准备pem秘钥文件 如果已经有pem文件,则跳过这一步。如果手上有ppk文件,那么需要先转换为pem文件。 macOS 的默认 SSH 客户端不支持 PPK 格式,你需要将 PPK 文…...
EXPLAIN 针对性优化 SQL 查询
在数据库管理和应用中,高效的 SQL 查询是确保系统性能的关键。随着数据量的不断增长和业务需求的日益复杂,优化 SQL 查询变得尤为重要。而 EXPLAIN 命令是一种强大的工具,可以帮助我们深入了解 SQL 查询的执行计划,从而进行有针对…...
MR30分布式IO:石化行业的智能化革新
在浩瀚的工业领域中,石化行业如同一座巨大的化工厂,将自然界的原始资源转化为人们日常生活中不可或缺的各种产品。然而,随着生产规模的扩大和工艺复杂度的提升,石化行业面临着前所未有的挑战:如何在保证生产效率的同时…...
linux图形化X窗口
【linux图形化协议框架】 X、X11系统:X协议,X服务器,窗口管理器,X客户端(客户端库Xcb,Xlib库等),输入、绘制 Wayland系统:Wayland 协议,合成器、客户端&#…...
练习LabVIEW第三十五题
学习目标: 刚学了LabVIEW,在网上找了些题,练习一下LabVIEW,有不对不好不足的地方欢迎指正! 第三十五题: 使用labview模拟一个3-8译码器 开始编写: 用LabVIEW做3-8译码器首先要知道它是个啥…...
Decision Tree Regressor (决策树) --- 论文实战
一、前言 在《机器学习论文复现实战---linear regression》中通过Pearson 相关性分析,去除了2个高相关性特征 "PN" 和 "AN" ,数据维度变为890*25。(数据集地址) 这里我们不做前期处理,直接就将数据放入 DecisionTreeRegressor 模型中进行训练了。 二…...
三层交换技术,eNSP实验讲解
三层交换技术,eNSP实验讲解 一、简要介绍1、概念2、工作原理3、优点4、应用场景5、与路由器的区别 二、eNSP仿真实验1、步骤一:创建连接,明确参数。2、步骤二:设置PC1和PC2参数3、步骤三:配置交换机,通过命…...
单链表OJ题(3):合并两个有序链表、链表分割、链表的回文结构
目录 一、合并两个有序链表 二、链表分割 三、链表的回文结构 u解题的总体思路: 合并两个有序链表:首先创建新链表的头节点(哨兵位:本质上是占位子),为了减少一些判断情况,简化操作。然后我们…...
研究了100个小绿书十万加之后,我们发现2024小绿书独家秘籍就是:在于“先抄后超,持续出摊,量大管饱”!
小绿书作为今年最大的红利,很多人已经吃到了螃蟹。看——: 今天我们总结了100个10万爆款,我们发现要在这个平台上脱颖而出,找到属于自己的方法尤为重要。在这里分享一个主题——小绿书的秘诀就是“先抄后超,持续出摊”…...
Java 中 HashMap集合使用
目录 一. HashMap概述 二. HashMap特点 三. HashMap构造方法 四. HashMap的常用方法 五. 使用注意事项 六. 代码示例 一. HashMap概述 HashMap 是 Java 中的一个非常重要的类,它实现了 Map 接口,用于存储键值对(key-value pairs&#…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...
基础测试工具使用经验
背景 vtune,perf, nsight system等基础测试工具,都是用过的,但是没有记录,都逐渐忘了。所以写这篇博客总结记录一下,只要以后发现新的用法,就记得来编辑补充一下 perf 比较基础的用法: 先改这…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中,提示一个依赖外部头文件的cpp源文件需要同步,点…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
WebRTC从入门到实践 - 零基础教程
WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC? WebRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音…...
