如何使用CSS和JS实现一个响应式的滚动时间轴
随着互联网的发展,网站的界面设计越来越重要。吸引用户的关注、提高用户体验已经成为了许多网站的目标。而在实现各种复杂的界面效果中,CSS与JS的组合无疑是开发者的得力工具。本文将介绍如何使用CSS和JS实现一个响应式的滚动时间轴。
1.需求分析
在开始实现之前,我们需要分析出需求。首先,我们需要一个时间轴的框架,其中包含一系列的事件节点,这些事件节点可以根据滚动条的位置来进行滚动。其次,在滚动条滚动期间,我们需要将当前事件节点高亮显示,以便用户更好地了解当前所处的时间位置。最后,如果用户拖拽滚动条时,我们需要平滑地接过控制权,并根据滚动条位置来定位事件节点。
2.准备工作
在开始实现之前,我们需要做一些准备工作。首先,我们需要准备好HTML结构,包括时间轴框架、事件节点等元素;其次,我们需要使用CSS样式来美化这些元素,并且确保它们能正确地显示在页面上;最后,我们需要使用JS来控制滚动条的位置并根据其位置来定位事件节点。下面是我们需要准备的HTML结构:
<div class="timeline__container"> <div class="timeline__track"> <ul class="timeline__events"> <li class="timeline__event" style="left: 0;"> <div class="timeline__event_title">Event 1</div> <div class="timeline__event_date">2023-05-03</div> </li> <li class="timeline__event" style="left: 20%;"> <div class="timeline__event_title">Event 2</div> <div class="timeline__event_date">2023-05-04</div> </li> <li class="timeline__event" style="left: 40%;"> <div class="timeline__event_title">Event 3</div> <div class="timeline__event_date">2023-05-05</div> </li> <li class="timeline__event" style="left: 60%;"> <div class="timeline__event_title">Event 4</div> <div class="timeline__event_date">2023-05-06</div> </li> <li class="timeline__event" style="left: 80%;"> <div class="timeline__event_title">Event 5</div> <div class="timeline__event_date">2023-05-07</div> </li> </ul> <div class="timeline__scrollbar"> <div class="timeline__thumb"></div> </div> </div> </div>
这段代码中,我们使用了一个div
元素来作为时间轴的容器,其中包含了一个div
元素作为时间轴的轨道。轨道中包含了一个无序列表ul
,其中的每个列表项li
代表一个事件节点。每个事件节点中包含了一个标题和日期。最后,我们还需要一个滚动条以便用户进行滚动。
接下来,我们需要使用CSS样式来美化这些元素并确保它们能正确地显示在页面上。
.timeline__container { width: 100%; height: 500px; position: relative; } .timeline__track { width: 80%; height: 500px; background-color: #fff; margin: 0 auto; position: relative; overflow-x: hidden; } .timeline__events { display: flex; position: absolute; top: 50%; transform: translateY(-50%); left: 0; margin: 0; padding: 0; width: 100%; } .timeline__event { width: 20%; height: 80%; margin: 0; padding: 0; position: relative; list-style: none; cursor: pointer; transition: all 0.3s ease-in-out; z-index: 1; text-align: center; } .timeline__event_title { font-size: 18px; font-weight: bold; margin-bottom: 10px; } .timeline__event_date { font-size: 14px; } .timeline__event::before { content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: -5px; width: 10px; height: 10px; border-radius: 50%; background-color: #fff; border: 3px solid #000; z-index: 2; } .timeline__event:hover { transform: scale(1.2); z-index: 3; } .timeline__event.active { transform: scale(1.2); z-index: 3; } .timeline__scrollbar { position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background-color: #eee; } .timeline__thumb { position: absolute; top: 0; left: 0; width: 20%; height: 100%; background-color: #ccc; cursor: pointer; }
这段代码中,我们设置了时间轴容器的宽高和位置相关属性。其中轨道的宽度为80%,高度为500px,并且在水平方向上隐藏了超出的内容。事件节点使用了flex
布局,并通过调整样式让它们居中放置于轨道上。事件节点带有标题和日期,并通过伪元素实现了一个小球来标志每个事件节点。当鼠标悬浮在节点上时,其大小会变大以及增加z-index属性,以便用户更好地了解当前所处的事件节点。最后,我们还设置了滚动条的样式。
3.实现
接下来,我们使用JS来实现滚动事件处理。首先,我们需要获取一些元素。
const timelineContainer = document.querySelector(".timeline__container"); const timelineEvents = document.querySelector(".timeline__events"); const timelineThumb = document.querySelector(".timeline__thumb");
然后,我们需要计算出时间轴的实际宽度、事件节点之间的距离以及滚动条的宽度。
const timelineWidth = timelineEvents.scrollWidth - timelineContainer.clientWidth; const eventSpacing = (100 / (timelineEvents.children.length - 1)); const thumbWidth = (100 - (eventSpacing * 2)) / timelineWidth * 100; timelineThumb.style.width = `${thumbWidth}%`;
接下来,我们需要监控滚动条的变化,并根据变化计算出当前应该高亮显示的事件节点。
let dragging = false; let scrollX = 0; let activeEventIndex = 0; timelineContainer.addEventListener("mousedown", (e) => { dragging = true; scrollX = e.clientX - timelineContainer.offsetLeft - (timelineThumb.clientWidth / 2); }); timelineContainer.addEventListener("mousemove", (e) => { if (!dragging) return; let newX = e.clientX - timelineContainer.offsetLeft - (timelineThumb.clientWidth / 2); let left = Math.max(0, Math.min(newX, timelineContainer.clientWidth - timelineThumb.clientWidth)); timelineThumb.style.left = `${left}px`; timelineEvents.style.transform = `translateX(-${(left / timelineWidth) * 100}%)`; activeEventIndex = Math.round((left / timelineWidth) * (timelineEvents.children.length - 1)); setActiveEvent(); }); timelineContainer.addEventListener("mouseup", () => { dragging = false; }); function setActiveEvent() { Array.prototype.slice.call(timelineEvents.children).forEach((event, index) => { event.classList.toggle("active", index === activeEventIndex); }); }
在这段代码中,我们添加了鼠标按下、鼠标移动和鼠标抬起事件处理函数来监控滚动条的变化。当用户拖拽滚动条时,我们将计算出当前应该高亮显示的事件节点,并调用setActiveEvent()
函数来更新它们的类名以便进行高亮显示。最后,我们还需要将滑块和时间轴上的事件节点位置同步。
4.总结
通过本文的介绍,我们学习了如何使用CSS和JS实现一个响应式的滚动时间轴。我们首先进行了需求分析,然后准备好HTML结构和CSS样式,最后使用JS实现了滚动事件处理。在实际开发中,我们可以根据自己的需求进行修改,并将其应用到网站中,为用户提供更好的体验。
相关文章:
如何使用CSS和JS实现一个响应式的滚动时间轴
随着互联网的发展,网站的界面设计越来越重要。吸引用户的关注、提高用户体验已经成为了许多网站的目标。而在实现各种复杂的界面效果中,CSS与JS的组合无疑是开发者的得力工具。本文将介绍如何使用CSS和JS实现一个响应式的滚动时间轴。 1.需求分析 在开…...

Feign组件的使用及开发中使用方式
在微服务的服务集群中服务与服务之间需要调用暴露的服务.那么就需要在服务内部发送http请求, 我们可以使用较为老的HttpClient实现,也可以使用SpringCloud提供的RestTemplate类调用对应的方法来发送对应的请求。 说明: 现在有两个微服务一个是…...
html css 面试题
1. 如何理解HTML语义化 1,可读性,易读性 2,seo搜索引擎更容易读懂 2,哪些是块元素,哪些是内联元素 1:div,h1,table,ul,p 2:span, img…...

LeetCode_双指针_中等_24.两两交换链表中的节点
目录 1.题目2.思路3.代码实现(Java) 1.题目 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交换)。 示例 1&a…...

【openGauss实战11】性能报告WDR深度解读
📢📢📢📣📣📣 哈喽!大家好,我是【IT邦德】,江湖人称jeames007,10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】!😜&am…...
Vue3实现打字机效果
typeit 介绍 typeit是一款轻量级打字机特效插件。该打印机特效可以设置打字速度,是否显示光标,是否换行和延迟时间等属性,它可以打印单行文本和多行文本,并具有可缩放、响应式等特点。官方文档 安装 # npm npm install typeit # …...
maven无法依赖spring-cloud-stater-zipkin如何解决?
当 Maven 无法依赖 spring-cloud-starter-zipkin 时,您可以尝试以下方法解决: 确保拼写正确:请检查项目中的 pom.xml 文件,确保依赖的拼写正确。正确的依赖名称应为:spring-cloud-starter-zipkin。添加 Spring Cloud …...
实战踩坑---MFC---CreateEvent
使用事件CreateEvent注意事项 HANDLECreateEvent( LPSECURITY_ATTRIBUTESlpEventAttributes,// 安全属性 BOOLbManualReset,// 复位方式 BOOLbInitialState,// 初始状态 LPCTSTRlpName // 对象名称 );[1] 参数 lpEventAttributes[输入] 一个指向SECURITY_ATTRIBUTES结构…...

JavaWeb学习------jQuery
JavaWeb学习------jQuery jQuery函数库下载 jQuery函数库下载官网:Download jQuery | jQuery配套资料,免费下载 链接:https://pan.baidu.com/s/1aXBfItEYG4uM53u6PUEMTg 提取码:6c9i 然后下载? 来到官网…...
米哈游测开岗 【一面总结】
目录 1.黑盒测试与白盒测试的区别 2.测试一个下单功能 3.get与post的区别 4.一次get请求产生几个数据包 5.常用的linux命令 6.进程与线程的区别 7.数据库查询如何去重 8.MySql怎么连接两张表,有什么区别 9.说说索引 10.cookie 和 session 的区别 (会话管…...
微服务 Spring Boot 整合Redis 实现优惠卷秒杀 一人一单
文章目录 一、什么是全局唯一ID ⛅全局唯一ID ⚡Redis实现全局唯一ID 二、环境准备 三、实现秒杀下单 四、库存超卖问题 ⏳问题分析 ⌚ 乐观锁解决库存超卖 ✅Jmeter 测试 五、优惠卷秒杀 实现一人一单 ⛵小结 一、什么是全局唯一ID ⛅全局唯一ID 在分布式系统中,经常需要使用…...

构建OVS网络
构建OVS网络 1. 配置虚拟机环境 (1)配置虚拟机交换机 1 创建一个名为br-xd的虚拟交换机。 # ovs-vsctl add-br br-xd 2 查询虚拟交换机。 # ovs-vsctl show 5a1cd870-fc31-4820-a7f4-b75c19450582 Bridge br-xd Port br-xd …...
【Python】万能之王 Lambda 函数详解
Python 提供了非常多的库和内置函数。有不同的方法可以执行相同的任务,而在 Python 中,有个万能之王函数:lambda 函数,它可以以不同的方式在任何地方使用。今天云朵君将和大家一起研究下这个万能之王! Lambda 函数简介…...

手把手教你怎么搭建自己的AI数字人直播间?帮你24小时不间断直播卖货
在搭建AI数字人直播间之前,您需要了解数字人技术。 一、什么是AI数字人、数字人直播间? 数字人是一种由人工智能技术构建的虚拟人物,其外貌、行为、语言等特征与真实人物相似,可以与人进行互动。数字人可以通过语音合成、人脸识…...

MySQL性能监控全掌握,快来get关键指标及采集方法!
数据库中间件监控实战,MySQL中哪些指标比较关键以及如何采集这些指标了。帮助提早发现问题,提升数据库可用性。 1 整体思路 监控哪类指标? 如何采集数据? 第10讲监控方法论如何落地? 这些就可以在MySQL中应用起来。…...

sed进阶之保留空间和排除命令
shell脚本编程系列 保留空间 模式空间(pattern space)是一块活跃的缓冲区,在sed编辑器执行命令时保存着待检查的文本,但它并不是sed编辑器保存文本的唯一空间。sed编辑器还有另一块称作保留空间(hold space࿰…...

21安徽练习
题目分为4部分 APK 集群 流量 exe 我尽量都做一下,逆向不是很会,就当提升自己。 [填空题]请获取app安装包的SHA256校验值(格式:不区分大小写)(10分) e15095d49efdccb0ca9b2ee125e4d8136cac5…...
【VAR | 时间序列】应用VAR模型时的15个注意点
一、前言 向量自回归(VAR,Vector Auto regression)常用于预测相互联系的时间序列系统以及分析随机扰动对变量系统的动态影响。 VAR方法通过把系统中每一个内生变量,作为系统中所有内生变量的滞后值的函数来构造模型,从而回避了结构化模型的…...
校招在线测评题目汇总
图形找规律题 https://blog.csdn.net/mxj1428295019/article/details/129627461https://blog.csdn.net/Yujian2563/article/details/124266574?spm1001.2101.3001.6650.2&utm_mediumdistribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-124266574-blo…...

『python爬虫』05. requests模块入门(保姆级图文)
目录 安装requests1. 抓取搜狗搜索内容 requests.get2. 抓取百度翻译数据 requests.post3. 豆瓣电影喜剧榜首爬取4. 关于请求头和关闭request连接总结 欢迎关注 『python爬虫』 专栏,持续更新中 欢迎关注 『python爬虫』 专栏,持续更新中 安装requests …...

网络编程(Modbus进阶)
思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师,让萌系Otto机器人🔥玩出智能新花样!开整!” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制(TuyaAI…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)
参考官方文档:https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java(供 Kotlin 使用) 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT,橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版:职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式(本地调用) SSE模式(远程调用) 4. 注册工具提…...

MFC 抛体运动模拟:常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...
第7篇:中间件全链路监控与 SQL 性能分析实践
7.1 章节导读 在构建数据库中间件的过程中,可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中,必须做到: 🔍 追踪每一条 SQL 的生命周期(从入口到数据库执行)&#…...