当前位置： 首页 > news >正文

前端页面整屏滚动fullpage.js简单使用

news 2026/2/10 22:36:09

官网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"…...

编程日记 2024/11/4 3:26:01

JQuery基本介绍和使用方法

JQuery基本介绍和使用方法 W3C 标准给我们提供了⼀系列的函数, 让我们可以操作: ⽹⻚内容⽹⻚结构⽹⻚样式 但是原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们可以使⽤JQuery来操作⻚⾯对象. jQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 于20…...

编程日记 2024/11/4 3:22:56

【案例】旗帜飘动

开发平台&#xff1a;Unity 6.0 开发工具&#xff1a;Shader Graph 参考视频&#xff1a;Unity Shader Graph 旗帜飘动特效   一、效果图 二、Shader Graph 路线图 三、案例分析 核心思路&#xff1a;顶点偏移计算 与 顶点偏移忽略 3.1 纹理偏移 视觉上让旗帜保持动态飘动&a…...

编程日记 2024/11/4 3:21:55

大模型思维链推理的综述：进展、前沿和未来

转自公众号AIRoobt A Survey of Chain of Thought Reasoning: Advances, Frontiers and Future 思维链推理的综述&#xff1a;进展、前沿和未来 摘要&#xff1a;思维链推理&#xff0c;作为人类智能的基本认知过程&#xff0c;在人工智能和自然语言处理领域引起了极大的关注…...

编程日记 2024/11/4 3:17:51

项目一：使用 Spring + SpringMVC + Mybatis + lombok 实现网络五子棋

一&#xff1a;系统展示: 二&#xff1a;约定前后端接口 2.1 登陆 登陆请求&#xff1a; GET /login HTTP/1.1 Content-Type: application/x-www-form-urlencodedusernamezhangsan&password123登陆响应&#xff1a; 正常对象&#xff1a;正常对象会在数据库中存储&…...

编程日记 2024/11/4 3:12:45

openEuler 系统中 Samba 文件共享服务器管理（windows、linux文件共享操作方法）

一、Samba 简介 Samba 是在 Linux 和 Unix 系统上实现 SMB/CIFS 协议的一个免费软件&#xff0c;使得这些系统可以与 Windows 系统进行文件和打印机共享。通过 Samba&#xff0c;可以将 openEuler 系统配置为文件服务器&#xff0c;让 Windows、Linux 和其他支持 SMB/CIFS 协议…...

编程日记 2024/11/4 3:11:44

使用 Elasticsearch 进行语义搜索

Elasticsearch 是一款功能强大的开源搜索引擎&#xff0c;可用于全文搜索、分析和数据可视化。传统上&#xff0c;Elasticsearch 以其执行基于关键字/词汇的搜索的能力而闻名&#xff0c;其中文档基于精确或部分关键字匹配进行匹配。然而&#xff0c;Elasticsearch 已经发展到支…...

编程日记 2024/11/4 3:09:42

软考：中间件

中间件 中间件是一类位于操作系统软件与用户应用软件之间的计算机软件&#xff0c;它包括一组服务&#xff0c;以便于运行在一台或多台机器上的多个软件通过网络进行交互。 中间件的主要功能包括通信支持和应用支持。 通信支持为应用软件提供平台化的运行环境&#xff0c;屏蔽…...

编程日记 2024/11/4 3:05:38

银行家算法（Banker’s Algorithm）

银行家算法&#xff08;Banker’s Algorithm&#xff09;是计算机操作系统中一种避免死锁发生的著名算法。该算法由艾兹格迪杰斯特拉&#xff08;Edsger Dijkstra&#xff09;在1965年为T.H.E系统设计&#xff0c;其核心理念基于银行借贷系统的分配策略&#xff0c;以确保系统的…...

编程日记 2024/11/4 3:03:36

用魔数严谨的判别文件类型：杜绝上传风险

在文件处理和管理中&#xff0c;确定文件的类型是一个常见的需求。虽然文件扩展名可以提供一些信息&#xff0c;但并不总是可靠的。魔数&#xff08;Magic Numbers&#xff09;是一种更为准确的方法&#xff0c;通过检查文件开头的特定字节序列来识别文件类型。本文将介绍如何在…...

编程日记 2024/11/4 3:02:36

【MacOS实操】如何基于SSH连接远程linux服务器

MacOS上远程连接linux服务器&#xff0c;可以使用ssh命令pem秘钥文件连接。 一、准备pem秘钥文件 如果已经有pem文件&#xff0c;则跳过这一步。如果手上有ppk文件&#xff0c;那么需要先转换为pem文件。 macOS 的默认 SSH 客户端不支持 PPK 格式&#xff0c;你需要将 PPK 文…...

编程日记 2024/11/4 2:58:32

EXPLAIN 针对性优化 SQL 查询

在数据库管理和应用中&#xff0c;高效的 SQL 查询是确保系统性能的关键。随着数据量的不断增长和业务需求的日益复杂&#xff0c;优化 SQL 查询变得尤为重要。而 EXPLAIN 命令是一种强大的工具&#xff0c;可以帮助我们深入了解 SQL 查询的执行计划&#xff0c;从而进行有针对…...

编程日记 2024/11/4 2:57:30

MR30分布式IO：石化行业的智能化革新

在浩瀚的工业领域中&#xff0c;石化行业如同一座巨大的化工厂&#xff0c;将自然界的原始资源转化为人们日常生活中不可或缺的各种产品。然而&#xff0c;随着生产规模的扩大和工艺复杂度的提升&#xff0c;石化行业面临着前所未有的挑战&#xff1a;如何在保证生产效率的同时…...

编程日记 2024/11/4 2:56:30

linux图形化X窗口

【linux图形化协议框架】 X、X11系统&#xff1a;X协议&#xff0c;X服务器&#xff0c;窗口管理器&#xff0c;X客户端&#xff08;客户端库Xcb&#xff0c;Xlib库等&#xff09;&#xff0c;输入、绘制 Wayland系统&#xff1a;Wayland 协议&#xff0c;合成器、客户端&#…...

编程日记 2024/11/4 2:55:28

练习LabVIEW第三十五题

学习目标&#xff1a; 刚学了LabVIEW&#xff0c;在网上找了些题&#xff0c;练习一下LabVIEW&#xff0c;有不对不好不足的地方欢迎指正&#xff01; 第三十五题&#xff1a; 使用labview模拟一个3-8译码器 开始编写&#xff1a; 用LabVIEW做3-8译码器首先要知道它是个啥…...

编程日记 2024/11/4 2:53:26

Decision Tree Regressor (决策树) --- 论文实战

一、前言 在《机器学习论文复现实战---linear regression》中通过Pearson 相关性分析，去除了2个高相关性特征 "PN" 和 "AN" ，数据维度变为890*25。（数据集地址） 这里我们不做前期处理，直接就将数据放入 DecisionTreeRegressor 模型中进行训练了。 二…...

编程日记 2024/11/4 2:50:23

三层交换技术，eNSP实验讲解

三层交换技术&#xff0c;eNSP实验讲解 一、简要介绍1、概念2、工作原理3、优点4、应用场景5、与路由器的区别 二、eNSP仿真实验1、步骤一&#xff1a;创建连接&#xff0c;明确参数。2、步骤二&#xff1a;设置PC1和PC2参数3、步骤三&#xff1a;配置交换机&#xff0c;通过命…...

编程日记 2024/11/4 2:49:21

单链表OJ题（3）：合并两个有序链表、链表分割、链表的回文结构

目录 一、合并两个有序链表 二、链表分割 三、链表的回文结构 u解题的总体思路&#xff1a; 合并两个有序链表&#xff1a;首先创建新链表的头节点&#xff08;哨兵位&#xff1a;本质上是占位子&#xff09;&#xff0c;为了减少一些判断情况&#xff0c;简化操作。然后我们…...

编程日记 2024/11/4 2:47:20

研究了100个小绿书十万加之后，我们发现2024小绿书独家秘籍就是：在于“先抄后超，持续出摊，量大管饱”！

小绿书作为今年最大的红利&#xff0c;很多人已经吃到了螃蟹。看——&#xff1a; 今天我们总结了100个10万爆款&#xff0c;我们发现要在这个平台上脱颖而出&#xff0c;找到属于自己的方法尤为重要。在这里分享一个主题——小绿书的秘诀就是“先抄后超&#xff0c;持续出摊”…...

编程日记 2024/11/4 2:46:19

Java 中 HashMap集合使用

目录 一. HashMap概述 二. HashMap特点 三. HashMap构造方法 四. HashMap的常用方法 五. 使用注意事项 六. 代码示例 一. HashMap概述 HashMap 是 Java 中的一个非常重要的类&#xff0c;它实现了 Map 接口&#xff0c;用于存储键值对&#xff08;key-value pairs&#…...

编程日记 2024/11/4 2:45:18

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2026/2/8 4:37:06

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2026/1/31 21:56:58

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/11/30 16:55:32

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2026/1/31 3:30:33

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2026/2/1 11:33:19

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2026/1/30 2:33:11

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2026/2/10 6:39:48