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

这篇具有很好参考价值的文章主要介绍了scrollTop与offsetTop解决小分辨率区域块向上滚动效果效果,结合animation与@keyframes实现标题左右闪动更换颜色效果。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

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

 

 handleSelect(val, item) {
      this.activeIndex = val;
      this.isActive = val;
      // 获取外部div
      const 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;

具体解释:文章来源地址https://www.toymoban.com/news/detail-787793.html

  • 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实现标题左右闪动更换颜色效果。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于VirtualBox无法适应高分辨率电脑的解决方法

    由于我的电脑分辨率是2880x1880的,所以安装了VirtualBox后无法自适应全屏显示,网上找了很多办法都不管用。最后无意中发现这个办法比较好用。  首先,关闭虚拟机,点击设置,在显示一栏中,将显卡控制器改成VMSVGA,然后启用3D加速,显存大小设置成128M 。 系统-主板   系统

    2024年02月16日
    浏览(50)
  • 成功解决VMware安装操作系统出现分辨率的问题

    如下图: 在VMware16上安装ubuntu操作系统的时候,出现分辨率问题, 导致底部的按键没有出现 比如确定,返回,后退等这些按钮都没有。 出现这个问题一般是因为分辨率的问题导致的,VMware安装ubuntu默认使用的分辨率是800x600

    2024年02月09日
    浏览(38)
  • 解决windows由于分辨率调整导致的桌面图标位置乱序

    https://www.zhihu.com/question/328534753 https://baijiahao.baidu.com/s?id=1724804313296173730wfr=spiderfor=pc windows电脑由于连接(扩展)外接显示器、全屏游戏、远程桌面连接等会导致分辨率调整,从而导致桌面上排列好的图片会变乱,这里有两种方式解决: 通过修改注册表项来解决 通过桌面图标

    2024年01月23日
    浏览(78)
  • Visio 导出 PDF 文件 图片分辨率被降采样怎么解决

    在科研出图中,matlab 绘制图标后续使用 Visio,adobe illustrator,inkscape 相关内容可以参考这里。 此处解决在Visio中对实物图示意图进行标注后,使用Visio另存为, 打印,导出等输出的PDF文档中的图片分辨率很低的问题。 在Visio中不对图片进行缩放,使用原来大小进行编辑,然后

    2024年02月10日
    浏览(121)
  • win11/windows重命名时,命名栏只显示一个字符,而看不到全名?据说是系统分辨率和屏幕分辨率不匹配造成的?但如何解决呢?

    重命名时候只能显示一个字符。举个例子:比如我想将文件改名为12345。在我输入12之后,文件名仅显示2,继续打3时候仅显示3,而12不显示了。输入完12345之后文件名仅显示5。但是当按回车后,文件名最终还是12345。其实不是大毛病,但是用起来很别扭。我用的win11,重启啊,

    2024年02月15日
    浏览(336)
  • 电脑多个不同分辨率屏幕鼠标移动时出现偏移、错位情况的解决方法

      本文介绍在使用 不同尺寸 、 不同分辨率 的两个或多个电脑屏幕时,鼠标在不同屏幕之间切换时,出现偏移、飘动、不规则运动等情况的解决方法。   对于使用两个或多个电脑屏幕的用户而言,鼠标在不同屏幕之间的切换有时候会出现偏移的问题。在同时使用多个相

    2024年02月16日
    浏览(47)
  • Unity打包win出现无法全屏或分辨率不匹配解决方法

    首先打开注册表: 然后在注册表中选择对应路径: PS:路径中的[CompanyName][ProductName]请按照程序在PlayerSettings对应设置修改。 之前在网上找到的这个方法 记录一下

    2024年02月13日
    浏览(44)
  • 修改过高分辨率导致显示器黑屏 - 解决之无脑篇

    前言 :         之前搜索这个问题,都在说要重启电脑进入安全模式初始化分辨率参数,但是我就不是很想重启,所以就瞎猫碰到死耗子了。 场景 :(我理解的原因是黑屏的显示器支持的分辨率太少,修改后导致显示器某个参数错乱)         一台笔记本(主屏)和

    2024年02月06日
    浏览(167)
  • LabVIEW开发的上位机界面在其它电脑分辨率下-界面窗口偏移显示问题解决

    目录 问题: 分析: 解决方式 1)编辑前面板边界适配对应的分辨率 2)编辑前面板窗口-窗口边界 3)编辑前面板窗口-保持窗口比例 4)设置VI属性--窗口运行时位置居中显示 参考 在基于LabVIEW开发的上位机界面打包安装程序,并将该安装程序在其它电脑下运行,出现打开的界

    2024年02月09日
    浏览(39)
  • 关于Qt适配不同分辨率和缩放率时可能遇到的问题和解决方案

    如果没有特殊的处理,Qt的UI窗口在不同的分辨率和缩放率下,其显示效果可能会出现问题,常见的有: 子控件堆叠,无法显示完整 窗口尺寸变大,超出屏幕的显示范围 控件变形,长宽比不合理 界面模糊 字体变大,控件尺寸却没有变化 有两种方式可以对UI界面进行良好的缩

    2024年02月05日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包