使用JavaScript实现页面滑动切换效果
使用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页面设计中，页面滑动切换效果已经成为了一种常见的设计要求，能够提升用户体验，增加页面的交互性。本文将通过JavaScript来实现这一效果。 首先，我们需要在HTML中添加一些基础结构和…...
react中的formik如何使用
介绍： Formik 是一个用于处理表单状态和验证的 React 库。它提供了一种简化和统一的方式来处理复杂的表单逻辑，包括表单值的管理、表单验证、表单提交和错误处理等。 使用 安装 Formik 和 Yup（用于表单验证）： // ba…...
MYSQL储存过程
一、概念及形式 存储过程就是作为可执行对象存放在数据库中的一个或多个SQL命令，通俗来讲存储过程其实就是能完成一定操作的一组SQL语句。 1、自定义语句结束符 DELIMITER $$ 2、创建 使用CREATE动作及PROCEDURE关键字进行过程创建，一般格式为&…...
fastadmin、vue、react图标库适用于多种框架
在二开fastadmin中，在写vue以及react时，侧边导航栏以及按钮中常常需要很多图标，那么这些图标应该去哪里得到呢，在这里给大家一个链接，这里有丰富的图标库，可以找到自己想要的进行使用。 点击下方链接&…...
篇七：桥接模式：连接抽象和实现
篇七：“桥接模式：连接抽象和实现” 开始本篇文章之前先推荐一个好用的学习工具，AIRIght，借助于AI助手工具，学习事半功倍。欢迎访问：http://airight.fun/。 另外有2本不错的关于设计模式的资料，…...
STL容器适配器 -- stack和queue（使用+实现）（C++）
stack和queue stackstack的介绍stack的使用stack的实现 queuequeue的介绍queue的使用queue的实现 deque简单介绍deque（双端队列）双开口连续打引号的原因 deque底层结构deque的迭代器封装结构（复杂）deque的优缺点 栈和队列数据结构…...
K8s operator从0到1实战
Operator基础知识 Kubernetes Operator是一种用于管理和扩展Kubernetes应用程序的模式和工具。它们是一种自定义的Kubernetes控制器，可以根据特定的应用程序需求和业务逻辑扩展Kubernetes功能。 Kubernetes Operator基于Kubernetes的控制器模式，通过自…...
【LangChain学习】基于PDF文档构建问答知识库（三）实战整合 LangChain、OpenAI、FAISS等
接下来，我们开始在web框架上整合 LangChain、OpenAI、FAISS等。 一、PDF库 因为项目是基于PDF文档的，所以需要一些操作PDF的库，我们这边使用的是PyPDF2 from PyPDF2 import PdfReader# 获取pdf文件内容 def get_pdf_text(pdf):text "…...
阿里云国际站对象储存OSS的常见问题？
1.什么是阿里云OSS？ 阿里云对象存储服务OSS（Object Storage Service），是阿里云提供的海量、安全、低成本、高持久性的云存储服务，并可无限扩展。其数据设计持久性不低于99.9999999999%（12个9）&a…...
spss什么是描述性分析，以及如何去处理。
描述性分析是数据分析的第一步，是了解和认识数据基本特征和结构的方法，只有在完成了描述性统计分析，充分的了解和认识数据特征后，才能更好地开展后续更复杂的数据分析。因此，描述性分析是开展数据分析过程中最基础且必…...
OSCS 闭门研讨第一期实录：软件供应链安全建设价值
2023 年 7 月 18 日晚 19:30，软件供应链安全技术交流群（OSCS）组织了第一次线上的闭门研讨会，本次研讨会我们收到 71 个来自各个企业关注软件供应链安全的技术专家的报名，根据研讨会参与规则要求，我们对报名…...
STM32入门——ADC模数转换
ADC简介 ADC（Analog-Digital Converter）模拟-数字转换器ADC可以将引脚上连续变化的模拟电压转换为内存中存储的数字变量，建立模拟电路到数字电路的桥梁12位逐次逼近型ADC，1us转换时间输入电压范围：0~3.3V，…...
)
【Fegin技术专题】「原生态」打开Fegin之RPC技术的开端，你会使用原生态的Fegin吗？(下)
内容简介 在项目开发中，除了考虑正常的调用之外，负载均衡和故障转移也是关注的重点，这也是feign ribbon的优势所在，基于上面两篇文章的基础，接下来我们开展最后一篇原生态fegin结合ribbon服务进行服务远程调用且实现负…...
)
【leetcode】454. 四数相加 II(medium)
给你四个整数数组 nums1、nums2、nums3 和 nums4 ，数组长度都是 n ，请你计算有多少个元组 (i, j, k, l) 能满足： 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0 思路：如果要暴力，那么时间复杂…...
PHP先等比缩放再无损裁剪图片【实例源码】
很多人在使用程序裁剪图片时，是在原图上直接裁剪，这样的裁剪结果是使得图片变得不完整了，理想的做法是先等比缩小图片，再把多余的部分裁掉，这样会保留更多的图片信息。 实现代码： <?php/*** 说明：函数功能是把一个图像裁剪为任意大小的图像，图像不变形** @param …...
共享广告主项目：广告也能共享？全民广告时代来袭
科思创业汇 大家好，这里是科思创业汇，一个轻资产创业孵化平台。赚钱的方式有很多种，我希望在科思创业汇能够给你带来最快乐的那一种！ 广告是我们日常生活中在衣食住行中可以看到的一种宣传方式。广告作为互联网社会的信息传播方…...
Flink-间隔联结
间隔联结只支持事件时间间隔联结如果遇到迟到数据，则会关联不上，比如来了一个5秒的数据，它可以关联前2秒的数据，后3秒的数据，就是可以关联3秒到8秒的数据，然后又来了一个6秒的数据，可以关联4秒到…...
redis的持久化
第一章、redis的持久化 1.1）持久化概述 ①持久化可以理解为将数据存储到一个不会丢失的地方，Redis 的数据存储在内存中，电脑关闭数据就会丢失，所以放在内存中的数据不是持久化的，而放在磁盘就算是一种持久化。 ②为…...
藏语翻译器：多功能翻译软件
这是是一款能够将藏语翻译成其他语言或将其他语言翻译成藏语的软件。该软件能够识别并翻译藏语中的常用词汇和短语，并且支持多种常见语言的翻译，例如英语、汉语、法语、德语等等。此外，藏语翻译器还具有简单易用的用户界面，方便用…...
Java课题笔记~ JavaWeb概述/开发基础
JavaWeb概述/开发基础 1.XML基础 （1）XML概述 （2）XML语法 （3）DTD约束 （4）Schema约束（XML Schema 比 DTD 更强大） 2.Web基础知识 Web是一个分布式的超媒…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中，拉取视频流只要求udp方式，从2016开始要求新增支持tcp被动和tcp主动两种方式，udp理论上会丢包的，所以实际使用过程可能会出现画面花屏的情况，而tcp肯定不丢包，起码…...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣（LeetCode） 思路 使用两个栈：一个存储重复次数，一个存储字符串 遍历输入字符串： 数字处理：遇到数字时，累积计算重复次数左括号处理：保存当前状态&a…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹，并新增内容 3.创建package文件夹...
以光量子为例，详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学（silicon photonics）的光波导（optical waveguide）芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中，光既是波又是粒子。光子本…...
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问（基础概念问题） 1. 请解释Spring框架的核心容器是什么？它在Spring中起到什么作用？ Spring框架的核心容器是IoC容器&#…...
为什么要创建 Vue 实例
核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...
解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域，无损检测（NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统，以非接触式光学麦克风技术为核心，打破传统检测瓶颈，为半导体、航空航天、汽车制造等行业提供了高灵敏…...
SQL Server 触发器调用存储过程实现发送 HTTP 请求
文章目录 需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...
水泥厂自动化升级利器：Devicenet转Modbus rtu协议转换网关
在水泥厂的生产流程中，工业自动化网关起着至关重要的作用，尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关，为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多，其中不少设备采用Devicenet协议。Devicen…...