前端页面整屏滚动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>

效果图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/462356.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Rust整合Elasticsearch

Elasticsearch是什么 Lucene&#xff1a;Java实现的搜索引擎类库 易扩展高性能仅限Java开发不支持水平扩展 Elasticsearch&#xff1a;基于Lucene开发的分布式搜索和分析引擎 支持分布式、水平扩展提高RestfulAPI&#xff0c;可被任何语言调用 Elastic Stack是什么 ELK&a…

opencv-day2-图像预处理1

图像预处理 在计算机视觉和图像处理领域&#xff0c;图像预处理能够提高后续处理&#xff08;如特征提取、目标检测等&#xff09;的准确性和效率。 常见的图像预处理操作&#xff1a; 图像色彩空间转换 图像大小调整 图像仿射变换 图像翻转 图像裁剪 图像二值化处理 图…

scrapy爬取名人名言

爬取名人名言&#xff1a;http://quotes.toscrape.com/ 1 创建爬虫项目&#xff0c;在终端中输入&#xff1a; scrapy startproject quotes2 创建之后&#xff0c;在spiders文件夹下面创建爬虫文件quotes.py&#xff0c;内容如下&#xff1a; import scrapy from scrapy.spi…

一文了解Linux内核I2C子系统,驱动苹果MFI加密芯片

版本 日期 作者 变更表述 1.0 2024/10/27 于忠军 文档创建 背景&#xff1a;由于苹果有一套MFI IAP2的蓝牙私有协议&#xff0c;这个协议是基于BR/EDR的RFCOMM自定义UUID来实现IAP2协议的通信&#xff0c;中间会牵扯到苹果加密芯片的I2C读取&#xff0c;所以我们借此机…

Spring之依赖注入(DI)和控制反转(IoC)——配置文件、纯注解

依赖注入 依赖注入(Dependency Injection&#xff0c;简称 DI)与控制反转(loC)的含义相同&#xff0c;只不过这两 个称呼是从两个角度描述的同一个概念。对于一个 Spring 初学者来说&#xff0c;这两种称呼很难理解, 下面我们将通过简单的语言来描述这两个概念。 当Java对象&…

Ubuntu 22.04安装部署

一、部署环境 表 1‑1 环境服务版本号系统Ubuntu22.04 server lts运行环境1JDK1.8前端WEBNginx1.8数据库postgresqlpostgresql13postgis3.1pgrouting3.1消息队列rabbitmq3.X(3.0以上)运行环境2erlang23.3.3.1 二、安装系统 2.1安装 1.安装方式&#xff0c;选第一条。 2.选择…

基于ResNet50模型的船型识别与分类系统研究

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【LSTM模型实现光伏发电功率的预测】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模…

信息学科平台系统开发:基于Spring Boot的最佳实践

3系统分析 3.1可行性分析 通过对本基于保密信息学科平台系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本基于保密信息学科平台系统采用Spring Boot框架&a…

Cityscapes数据集:如何将像素级的多边形标注的分割数据标注转为目标检测的bbox标注

Cityscapes数据集官网下载地址&#xff1a; https://www.cityscapes-dataset.com/ 相关介绍&#xff1a;从官网下载这三个压缩包文件leftImg8bit_trainvaltest.zip、gtCoarse.zip、gtFine_trainvaltest.zip 1&#xff09;leftImg8bit_trainvaltest.zip分为train、val以及tes…

【周末推荐】Windows无缝连接iPhone

关注“ONE生产力”&#xff0c;获取更多精彩推荐&#xff01; 又到了周末推荐时间了&#xff0c;今天我们介绍一个Windows内置的功能&#xff0c;能够帮助大家将自己的电脑和iPhone连接在一起。 很多用Windows的小伙伴羡慕macOS可以和iPhone无缝连接&#xff0c;轻松阅读和回…

JDBC/ODBC—数据库连接API概述

JDBC/ODBC概述 在数据库连接领域&#xff0c;有两种广泛使用的技术&#xff1a;ODBC&#xff08;Open Database Connectivity - 开放数据库连接&#xff09;和 JDBC&#xff08;Java Database Connectivity - Java 数据库连接&#xff09;。 一、什么是 ODBC&#xff1f; Ope…

Vagrant使用教程:创建CentOS 8虚拟机

目录 简介准备工作下载配置Vagrant修改环境变量创建VAGRANT_HOME环境变量修改virturalBox新建虚拟机文件的默认生成路径修改Vagrant配置支持VirtualBox7.1.x版本创建Vagrant文件添加镜像 初始化并开机初始化开发环境开机 其他配置项宿主机的交换目录修改虚拟机内存修改 访问方式…

使用Django Channels实现WebSocket实时通信

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用Django Channels实现WebSocket实时通信 Django Channels 简介 环境搭建 安装 Django 和 Channels 创建 Django 项目 配置 A…

【JAVA 笔记】11 ch08_opp_intermediate 第8章 面向对象编程(中级部分)

第8章 面向对象编程(中级部分) IDEA 常用快捷键 包 包的三大作用 包基本语法 包的本质分析 包的命名 常用的包 如何引入包 注意事项和使用细节 访问修饰符 基本介绍 访问修饰符的访问范围! 使用的注意事项 面向对象编程三大特征 基本介绍 封装介绍 封装的理解和好处 封装的实现…

面试题:JVM(四)

new对象流程&#xff1f;&#xff08;龙湖地产&#xff09; 对象创建方法&#xff0c;对象的内存分配。&#xff08;360安全&#xff09; 1. 对象实例化 创建对象的方式有几种&#xff1f; 创建对象的步骤 指针碰撞&#xff1a;以指针为分界线&#xff0c;一边是已连续使用的…

无人机螺旋桨动平衡分析测试台

产品简介 Flight Stand系列动力测试台全部支持螺旋桨动平衡分析测试功能&#xff0c;用户仅需几个简单的操作步骤&#xff0c;轻松实现电机和螺旋桨ISO 21940-11:2016标准级的动平衡精度。 功能说明 测试台一体化集成有三坐标振动传感器和转速传感器&#xff0c;通过测量动力…

qt QTextEdit详解

QTextEdit是Qt框架中的一个文本编辑控件类&#xff0c;它提供了丰富的功能用于编辑和显示纯文本以及富文本。 重要方法 setPlainText(const QString &text)&#xff1a;设置纯文本内容。toPlainText()&#xff1a;获取纯文本内容。setHtml(const QString &text)&#…

杂项——USB键盘与鼠标流量分析——BUUCTF——流量分析

第一次做USB键盘与鼠标流量分析的题目&#xff0c;现在来好好做一个总结 1. 基础知识 USB流量指的是USB设备接口的流量&#xff0c;攻击者能够通过监听usb接口流量获取键盘敲击键、鼠标移动与点击、存储设备的铭文传输通信、USB无线网卡网络传输内容等等。 在正式介绍 USB H…

Windows部署rabbitmq

本次安装环境&#xff1a; 系统&#xff1a;Windows 11 软件建议版本&#xff1a; erlang OPT 26.0.2rabbitmq 3.12.4 一、下载 1.1 下载erlang 官网下载地址&#xff1a; 1.2 下载rabbitmq 官网下载地址&#xff1a; 建议使用解压版&#xff0c;安装版可能会在安装软件…

HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码CSS部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品…