scrollTop与offsetTop解决小分辨率区域块向上滚动效果效果,结合animation与@keyframes实现标题左右闪动更换颜色效果。

本文主要是介绍scrollTop与offsetTop解决小分辨率区域块向上滚动效果效果,结合animation与@keyframes实现标题左右闪动更换颜色效果。,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

scrollTop 是一个属性,它表示元素的滚动内容垂直滚动条的位置。对于可滚动元素,scrollTop 属性返回垂直滚动条滚动的像素数,即元素顶部被隐藏的像素数。 

offsetTop 是一个属性,用于获取一个元素相对于其父元素的垂直偏移量(距离)。具体来说,返回的是一个元素的顶部边缘相对于其 offsetParent 元素顶部边缘的距离。

此时,有一个需求:如果目前在1440分辨率下,则会出现滚动条,希望点击左边的B时,右边的B内容区域可以向上移动到A内容的位置上,同时B的标题内容会有一个左右闪动颜色更换的效果。当点击左边菜单C时,右边的C内容区域可以向上移动,同时C的标题内容会有一个左右闪动颜色更换的效果。但是要保证D内容永远在可视窗口的最下面。如下草图所表示:(静态图片没有左右闪动颜色更换的效果的草图,将就看下)

 

 handleSelect(val, item) {this.activeIndex = val;this.isActive = val;// 获取外部divconst contentDiv = this.$refs.content;// 左边4个菜单进行循环遍历,对目前获取的单块区域遍历,如果单块区域的index+1=val,把外部div往上移动小div的父节点的距离for (let i = val; i <= 4; i++) {if (this.activeIndex == i) {document.querySelectorAll(".title").forEach((dom, index) => {if (index + 1 == val) {contentDiv.scrollTop = dom.parentNode.offsetTop - 10// 找到当下点击的dom,拿到dom下的span即文字元素,加入了class闪动效果const allChildren = dom.querySelector('span');allChildren.classList.add('blinking-text')setTimeout(() => {// 移除闪动效果的类allChildren.classList.remove('blinking-text');}, 1000)}})}}}}

 1. document.querySelectorAll(".title").forEach((dom, index) => {...});:使用 querySelectorAll 方法获取页面上所有带有 title 类(标题)的 div 元素,并使用 forEach 遍历它们。index 是元素在数组中的索引值。

2. if (index + 1 == val):如果当前元素的索引值加 1 等于当前选中的菜单项的索引值 val,则执行以下操作: 1. contentDiv.scrollTop = dom.parentNode.offsetTop - 10;:将 content 区域的外部 div 元素的 scrollTop 属性设置为当前元素父元素的 offsetTop 减去 10,以实现向上滚动的效果。

3. const allChildren = dom.querySelector('span');:获取当前元素下的所有 span 元素。

4. allChildren.classList.add('blinking-text');给当前元素下的所有 span 元素添加名为 blinking-text 的类,以实现闪动效果。

5.setTimeout(() => {...}, 1000);使用 setTimeout 方法在 1 秒后执行一个函数,该函数将移除 blinking-text 类

在css里面:

一:@keyframes 是 CSS 中用于创建动画的规则。通过 @keyframes,您可以定义动画的关键帧,即动画在不同时间点的状态。关键帧定义了动画从开始到结束的状态,以及中间经过的中间状态。

  • animationName 是动画的名称,您可以在 animation 属性中引用它。
  • from 和 to 表示动画的起始状态和结束状态。
  • 可以使用百分比来表示动画的中间状态。

二:animation 是 CSS 中用于创建动画效果的属性。通过 animation 属性,您可以将一个或多个 @keyframes 规则应用于一个元素,从而在元素上创建动画。animation 属性允许您指定动画的名称、持续时间、缓动函数、延迟等。

基本语法如下:

animation: name duration timing-function delay iteration-count direction fill-mode;

具体解释:

  • name: 指定用于动画的 @keyframes 的名称,或者是 none(无动画)。
  • duration: 指定动画的持续时间,可以是秒(s)或毫秒(ms)。
  • timing-function: 指定动画的缓动函数,控制动画的速度变化。常见的值包括 easelinearease-inease-out 等。
  • delay: 指定动画开始之前的延迟时间,可以是秒(s)或毫秒(ms)。
  • iteration-count: 指定动画的播放次数,可以是具体的次数(整数),也可以是 infinite(无限循环)。
  • direction: 指定动画的播放方向,可以是 normal(正常方向)、reverse(反向播放)、alternate(正反交替)等。
  • fill-mode: 指定动画在播放结束后的状态,可以是 forwards(保持最后一个关键帧的状态)、backwards(应用第一个关键帧的状态)等。
  @keyframes blink {0% {opacity: 1;color: #000;}25% {transform: translateX(-6px);}/* 左抖动 */50% {opacity: 0;color: #32B9AF;}/* 设置颜色变化 */75% {transform: translateX(6px);}/* 右抖动 */100% {opacity: 1;color: #32B9AF;animation-timing-function: ease-in-out;}/* 设置持续时间为2秒 */}.blinking-text {animation: blink 0.3s infinite;animation-iteration-count: 2;}

这篇关于scrollTop与offsetTop解决小分辨率区域块向上滚动效果效果,结合animation与@keyframes实现标题左右闪动更换颜色效果。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/591462

相关文章

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一:基于AbstractRoutingDataSource实现动态

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

opencv图像处理之指纹验证的实现

《opencv图像处理之指纹验证的实现》本文主要介绍了opencv图像处理之指纹验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、简介二、具体案例实现1. 图像显示函数2. 指纹验证函数3. 主函数4、运行结果三、总结一、