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

使用JavaScript实现页面滑动切换效果

news 2026/2/8 23:25:12

 

使用JavaScript实现页面滑动切换效果

在现代Web页面设计中，页面滑动切换效果已经成为了一种常见的设计要求，能够提升用户体验，增加页面的交互性。本文将通过JavaScript来实现这一效果。

首先，我们需要在HTML中添加一些基础结构和样式。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head><title>页面滑动切换效果</title><style>.page {width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: none;}</style>
</head>
<body><div class="page" id="page1"><h1>页面1</h1></div><div class="page" id="page2"><h1>页面2</h1></div><div class="page" id="page3"><h1>页面3</h1></div><script src="script.js"></script>
</body>
</html>

 

在CSS样式中，我们定义了一个名为“page”的类，它具有绝对定位并且默认不可见。我们在HTML中添加了三个页面元素，并分别设置了它们的id。

接下来，我们将通过JavaScript来实现页面的滑动切换效果。创建一个名为“script.js”的文件并在HTML中引入它。

在脚本文件中，我们将使用JavaScript来控制页面的显示和隐藏，并且通过添加CSS样式来实现滑动效果。

document.addEventListener("DOMContentLoaded", function() {var pages = document.querySelectorAll(".page");var currentPage = 0;var isAnimating = false;// 初始化当前页面pages[currentPage].style.display = "block";document.addEventListener("wheel", function(event) {if (isAnimating) return;// 向下滚动if (event.deltaY > 0) {nextPage();}// 向上滚动else {prevPage();}});function nextPage() {if (currentPage < pages.length - 1) {isAnimating = true;// 当前页面向上移动pages[currentPage].classList.add("move-up");// 下一页显示setTimeout(function() {pages[currentPage].style.display = "none";currentPage++;pages[currentPage].style.display = "block";pages[currentPage].classList.add("move-up");// 动画完成后移除样式setTimeout(function() {pages[currentPage].classList.remove("move-up");isAnimating = false;}, 1000);}, 1000);}}function prevPage() {if (currentPage > 0) {isAnimating = true;// 当前页面向下移动pages[currentPage].classList.remove("move-up");// 上一页显示setTimeout(function() {pages[currentPage].style.display = "none";currentPage--;pages[currentPage].style.display = "block";pages[currentPage].classList.remove("move-up");isAnimating = false;}, 1000);}}
});

 

在JavaScript中，我们首先获取到所有的页面元素，并初始化当前页面为第一个页面。接着，我们添加一个鼠标滚轮事件监听器来切换页面。

当向下滚动时，我们调用nextPage()函数，它将隐藏当前页面并显示下一个页面。我们使用CSS的动画效果将当前页面向上滑动，同时添加一个延迟，确保动画完成后再显示下一页。最后，我们在动画完成后移除相应的CSS样式。

当向上滚动时，我们调用prevPage()函数，它将隐藏当前页面并显示上一个页面。同样，我们使用CSS的动画效果将当前页面向下滑动，并在动画完成后显示上一页。

最后，我们在CSS中添加以下样式：

.move-up {transform: translateY(-100%);transition: transform 1s;
}

 

这个样式将使页面元素向上滑动100%，动画时间为1秒。

通过以上的代码示例，我们成功地使用JavaScript实现了页面滑动切换效果。你可以根据实际需要进行修改和扩展，以实现更多个性化的效果。

相关文章：

使用JavaScript实现页面滑动切换效果

使用JavaScript实现页面滑动切换效果 在现代Web页面设计中&#xff0c;页面滑动切换效果已经成为了一种常见的设计要求&#xff0c;能够提升用户体验&#xff0c;增加页面的交互性。本文将通过JavaScript来实现这一效果。 首先&#xff0c;我们需要在HTML中添加一些基础结构和…...

编程日记 2023/8/10 19:56:54

react中的formik如何使用

介绍&#xff1a; Formik 是一个用于处理表单状态和验证的 React 库。它提供了一种简化和统一的方式来处理复杂的表单逻辑&#xff0c;包括表单值的管理、表单验证、表单提交和错误处理等。 使用 安装 Formik 和 Yup&#xff08;用于表单验证&#xff09;&#xff1a; // ba…...

编程日记 2023/8/10 19:55:52

MYSQL储存过程

一、概念及形式 存储过程就是作为可执行对象存放在数据库中的一个或多个SQL命令&#xff0c;通俗来讲存储过程其实就是能完成一定操作的一组SQL语句。 1、自定义语句结束符 DELIMITER $$ 2、创建 使用CREATE动作及PROCEDURE关键字进行过程创建&#xff0c;一般格式为&…...

编程日记 2023/8/10 19:54:52

fastadmin、vue、react图标库适用于多种框架

在二开fastadmin中&#xff0c;在写vue以及react时&#xff0c;侧边导航栏以及按钮中常常需要很多图标&#xff0c;那么这些图标应该去哪里得到呢&#xff0c;在这里给大家一个链接&#xff0c;这里有丰富的图标库&#xff0c;可以找到自己想要的进行使用。 点击下方链接&…...

编程日记 2023/8/10 19:53:51

篇七：桥接模式：连接抽象和实现

篇七&#xff1a;“桥接模式&#xff1a;连接抽象和实现” 开始本篇文章之前先推荐一个好用的学习工具&#xff0c;AIRIght&#xff0c;借助于AI助手工具&#xff0c;学习事半功倍。欢迎访问&#xff1a;http://airight.fun/。 另外有2本不错的关于设计模式的资料&#xff0c…...

编程日记 2023/8/10 19:52:50

STL容器适配器 -- stack和queue（使用+实现）（C++）

stack和queue stackstack的介绍stack的使用stack的实现 queuequeue的介绍queue的使用queue的实现 deque简单介绍deque&#xff08;双端队列&#xff09;双开口连续打引号的原因 deque底层结构deque的迭代器封装结构&#xff08;复杂&#xff09;deque的优缺点 栈和队列数据结构…...

编程日记 2023/8/10 19:51:49

K8s operator从0到1实战

Operator基础知识 Kubernetes Operator是一种用于管理和扩展Kubernetes应用程序的模式和工具。它们是一种自定义的Kubernetes控制器&#xff0c;可以根据特定的应用程序需求和业务逻辑扩展Kubernetes功能。 Kubernetes Operator基于Kubernetes的控制器模式&#xff0c;通过自…...

编程日记 2023/8/10 19:50:45

【LangChain学习】基于PDF文档构建问答知识库（三）实战整合 LangChain、OpenAI、FAISS等

接下来&#xff0c;我们开始在web框架上整合 LangChain、OpenAI、FAISS等。 一、PDF库 因为项目是基于PDF文档的&#xff0c;所以需要一些操作PDF的库&#xff0c;我们这边使用的是PyPDF2 from PyPDF2 import PdfReader# 获取pdf文件内容 def get_pdf_text(pdf):text "…...

编程日记 2023/8/10 19:49:44

阿里云国际站对象储存OSS的常见问题？

1.什么是阿里云OSS&#xff1f; 阿里云对象存储服务OSS&#xff08;Object Storage Service&#xff09;&#xff0c;是阿里云提供的海量、安全、低成本、高持久性的云存储服务&#xff0c;并可无限扩展。其数据设计持久性不低于99.9999999999%&#xff08;12个9&#xff09;&a…...

编程日记 2023/8/10 19:48:41

spss什么是描述性分析，以及如何去处理。

描述性分析是数据分析的第一步&#xff0c;是了解和认识数据基本特征和结构的方法&#xff0c;只有在完成了描述性统计分析&#xff0c;充分的了解和认识数据特征后&#xff0c;才能更好地开展后续更复杂的数据分析。因此&#xff0c;描述性分析是开展数据分析过程中最基础且必…...

编程日记 2023/8/10 19:47:40

OSCS 闭门研讨第一期实录：软件供应链安全建设价值

2023 年 7 月 18 日晚 19:30&#xff0c;软件供应链安全技术交流群&#xff08;OSCS&#xff09;组织了第一次线上的闭门研讨会&#xff0c;本次研讨会我们收到 71 个来自各个企业关注软件供应链安全的技术专家的报名&#xff0c;根据研讨会参与规则要求&#xff0c;我们对报名…...

编程日记 2023/8/10 19:46:40

STM32入门——ADC模数转换

ADC简介 ADC&#xff08;Analog-Digital Converter&#xff09;模拟-数字转换器ADC可以将引脚上连续变化的模拟电压转换为内存中存储的数字变量&#xff0c;建立模拟电路到数字电路的桥梁12位逐次逼近型ADC&#xff0c;1us转换时间输入电压范围&#xff1a;0~3.3V&#xff0c;…...

编程日记 2023/8/10 19:45:39

【Fegin技术专题】「原生态」打开Fegin之RPC技术的开端，你会使用原生态的Fegin吗？(下)

内容简介 在项目开发中&#xff0c;除了考虑正常的调用之外&#xff0c;负载均衡和故障转移也是关注的重点&#xff0c;这也是feign ribbon的优势所在&#xff0c;基于上面两篇文章的基础&#xff0c;接下来我们开展最后一篇原生态fegin结合ribbon服务进行服务远程调用且实现负…...

编程日记 2023/8/10 19:44:37

【leetcode】454. 四数相加 II(medium)

给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0 思路&#xff1a;如果要暴力&#xff0c;那么时间复杂…...

编程日记 2023/8/10 19:43:36

PHP先等比缩放再无损裁剪图片【实例源码】

很多人在使用程序裁剪图片时，是在原图上直接裁剪，这样的裁剪结果是使得图片变得不完整了，理想的做法是先等比缩小图片，再把多余的部分裁掉，这样会保留更多的图片信息。 实现代码： <?php/*** 说明：函数功能是把一个图像裁剪为任意大小的图像，图像不变形** @param …...

编程日记 2023/8/10 19:42:35

共享广告主项目：广告也能共享？全民广告时代来袭

科思创业汇 大家好&#xff0c;这里是科思创业汇&#xff0c;一个轻资产创业孵化平台。赚钱的方式有很多种&#xff0c;我希望在科思创业汇能够给你带来最快乐的那一种&#xff01; 广告是我们日常生活中在衣食住行中可以看到的一种宣传方式。广告作为互联网社会的信息传播方…...

编程日记 2023/8/10 19:41:34

Flink-间隔联结

间隔联结只支持事件时间间隔联结如果遇到迟到数据&#xff0c;则会关联不上&#xff0c;比如来了一个5秒的数据&#xff0c;它可以关联前2秒的数据&#xff0c;后3秒的数据&#xff0c;就是可以关联3秒到8秒的数据&#xff0c;然后又来了一个6秒的数据&#xff0c;可以关联4秒到…...

编程日记 2023/8/10 19:40:33

redis的持久化

第一章、redis的持久化 1.1&#xff09;持久化概述 ①持久化可以理解为将数据存储到一个不会丢失的地方&#xff0c;Redis 的数据存储在内存中&#xff0c;电脑关闭数据就会丢失&#xff0c;所以放在内存中的数据不是持久化的&#xff0c;而放在磁盘就算是一种持久化。 ②为…...

编程日记 2023/8/10 19:39:31

藏语翻译器：多功能翻译软件

这是是一款能够将藏语翻译成其他语言或将其他语言翻译成藏语的软件。该软件能够识别并翻译藏语中的常用词汇和短语&#xff0c;并且支持多种常见语言的翻译&#xff0c;例如英语、汉语、法语、德语等等。此外&#xff0c;藏语翻译器还具有简单易用的用户界面&#xff0c;方便用…...

编程日记 2023/8/10 19:38:28

Java课题笔记~ JavaWeb概述/开发基础

JavaWeb概述/开发基础 1.XML基础 &#xff08;1&#xff09;XML概述 &#xff08;2&#xff09;XML语法 &#xff08;3&#xff09;DTD约束 &#xff08;4&#xff09;Schema约束&#xff08;XML Schema 比 DTD 更强大&#xff09; 2.Web基础知识 Web是一个分布式的超媒…...

编程日记 2023/8/10 19:37:27

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2026/2/8 18:25:56

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2026/1/25 13:18:12

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/12/5 2:40:04

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2026/1/27 7:46:36

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2026/1/31 4:37:39

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2026/1/31 6:53:51

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2026/1/30 15:27:25

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2026/1/25 7:20:01

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2026/2/6 13:10:51