使用js和css完成文本上下自动滚动效果

最新推荐文章于 2024-07-24 20:42:50 发布
最新推荐文章于 2024-07-24 20:42:50 发布
阅读量1k 收藏 3
点赞数
文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38188228/article/details/120386079
版权

11-监控区域(monitor)-布局

html结构：

      <!--监控-->
      <div class="monitor panel">
        <div class="inner">
          <div class="tabs">
            <a href="javascript:;" class="active">故障设备监控</a>
            <a href="javascript:;" >异常设备监控</a>
          </div>
          <div class="content">
            <div class="head">
              <span class="col">故障时间</span>
              <span class="col">设备地址</span>
              <span class="col">异常代码</span>
            </div>
            <div class="marquee-view">
              <div class="marquee">
                <div class="row">
                  <span class="col">20180701</span>
                  <span class="col">11北京市昌平西路金燕龙写字楼</span>
                  <span class="col">1000001</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190601</span>
                  <span class="col">北京市昌平区城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190704</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000003</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20180701</span>
                  <span class="col">北京市昌平区建路金燕龙写字楼</span>
                  <span class="col">1000004</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000005</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000006</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建西路金燕龙写字楼</span>
                  <span class="col">1000007</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000008</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000009</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190710</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000010</span>
                  <span class="icon-dot"></span>
                </div>
              </div>
            </div>
          </div>
          <div class="content">
            <div class="head">
              <span class="col">异常时间</span>
              <span class="col">设备地址</span>
              <span class="col">异常代码</span>
            </div>
            <div class="marquee-view">
              <div class="marquee">
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000001</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190701</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190703</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190704</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190705</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190706</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190707</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190708</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190709</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
                <div class="row">
                  <span class="col">20190710</span>
                  <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                  <span class="col">1000002</span>
                  <span class="icon-dot"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

监控区域 monitor 大盒子的高度是 480px

结构解释：

  • .tabs 标签选项 加上active激活选项 默认激活第一个选项
  • .content 切换内容 加上style="display: block;"显示内容 默认激活第一个内容

样式描述：

  • .inner 容器内间距 24px 0
  • .tabs 容器内间距 0 36px
    • a 容器 颜色： #1950c4 内间距：0 27px 字体：18px
    • 第一个a容器 去除左侧内间距 加上右侧2px宽度边框#00f2f1
    • 激活的时候 颜色白色
  • .content容器
    • 占满剩余高度 flex:1
    • 默认隐藏
  • .head 容器
    • 行高 1.05 背景 rgba(255, 255, 255, 0.1) 内间距 12px 36px 颜色 #68d8fe 字体大小 14px
  • row 容器
    • 行高 1.05 内间距 12px 36px 颜色 #68d8ff 字体大小 12px
    • .icon-dot 字体图标 绝对定位 左边0.2rem 透明度0
    • 鼠标经过后：背景 rgba(255, 255, 255, 0.1) 透明度1
  • col容器
    • 宽度：1rem 2.5rem 1rem
    • 第二个col 一行不换行 溢出 省略
/* 监控区域 */
.monitor{
  height: 6rem;
}
.monitor .inner{
  padding: .3rem 0;
  display: flex;
  flex-direction: column;
}
.monitor .tabs{
  padding: 0 .45rem;
  margin-bottom: 0.225rem;
  display: flex;
}
.monitor .tabs a{
  color:#1950c4;
  font-size: 0.225rem;
  padding: 0 .3375rem;
}
.monitor .tabs a:first-child{
  padding-left: 0;
  border-right: 0.025rem solid #00f2f1;
}
.monitor .tabs a.active{
  color: #fff;
}
.monitor .content{
  flex: 1;
  position: relative;
  display: none;
}
.monitor .head{
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.15rem 0.45rem;
  color: #68d8fe;
  font-size: 0.175rem;
}
.monitor .marquee-view {
  position: absolute;
  top: 0.5rem;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}
.monitor .row{
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  font-size: 0.15rem;
  color: #61a8ff;
  padding: 0.15rem 0.45rem;
}
.monitor .row .icon-dot{
  position: absolute;
  left: 0.2rem;
  opacity: 0;
}
.monitor .row:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #68d8fe;
}
.monitor .row:hover .icon-dot{
  opacity: 1;
}
.monitor .col:first-child{
  width: 1rem;
}
.monitor .col:nth-child(2){
  width: 2.5rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.monitor .col:nth-child(3){
  width: 1rem;
}

12-监控区域-效果

切换功能：

  • 绑定 标签页点击 事件
  • 当前容器加active其他容器移除active
  • index对应的内容容器显示其他容器隐藏
  // 切换
 $(".monitor .tabs").on("click", "a", function() {
    $(this).addClass("active").siblings("a").removeClass("active");
    // console.log($(this).index());
    //   选取对应索引号的content
    $(".monitor .content").eq($(this).index()).show().siblings(".content").hide();
  });

动画功能：

  • 实现思路：
    • 先克隆列表，追加在后面
    • marquee-view 占满剩余高度，溢出隐藏
      • 绝对定位，top 1.6rem bottom 0
      • 宽度100%，溢出隐藏
    • 使用animation实现动画
    • 使用 translateY 向上位移 50%
    • 动画时间15s，匀速播放，循环执行。

js代码：

  // 动画
  $(".marquee-view .marquee").each(function() {
    // console.log($(this));
    var rows = $(this).children().clone();
    $(this).append(rows);
  });

css代码：

/* 通过CSS3动画滚动marquee */
.marquee-view .marquee {
  animation: move 15s linear infinite;
}
@keyframes move {
  0% {
  }
  100% {
    transform: translateY(-50%);
  }
}
/* 3.鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {
  animation-play-state: paused;
}
热爱sunny
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue实现文本上下循环滚动
日常笔记/总结/系列知识梳理
12-20 1094
页面上有两块公告，需要循环滚动，最初使用animation实现了，但如果两块公告的条数不一致的话，就会导致两块公告滚动的快慢不同，由此需要换种方式实现，使两块公告始终以同样的快慢节奏滚动。
html 自动滚动,JS实现自动滚屏/滚动效果
weixin_33502400的博客
05-30 1671
3.1 打开报表打开报表：%FR_HOME%\WebReport\WEB-INF\reportlets\demo\analytics\multi_report\all.frm3.2 报表块设置选中表单中的报表块report0，点击工具栏上的冻结，弹出重复与冻结设置对话框，勾选并设置重复标题行从第1行至第2，勾选冻结第1行至第2行，如下图所示：3.3 添加初始化后事件选中报表块report0，添加初...
css3过渡 文字自动滚动效果
qq_43780814的博客
11-24 420
//html .el_scrollbar_box(@click="$refs.projectAbout.open()") p(ref="scroll_p" style="cursor:pointer;") {{ project_overview }} //data data() { return { scroll_p: null, playTimer_s: 0, playTimer_ms: 0, scroll_p: null, } //js mounted.
CSS实现文字上下滚动、间歇滚动和无限滚动
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
06-19 745
主要记录了用CSS实现文字上下滚动、间歇滚动和无限滚动效果
css 文本超出自动滚动
ellynxu的博客
01-11 8613
假设滚动的这个东西类名为name 1. name的父元素宽度一定，且小于name的宽度，且父元素overflow: hidden; 2. 下面2.35rem是name的父元素的宽度, 可替换为别的 .name { white-space: nowrap; } .name.scroll { animation: 3s wordsLoop linear infinite; } @keyframes wordsLoop { 0% { transform: tra..
如何在 Chrome 中使用纯 CSS 创建视差滚动效果
rubys007的博客
03-09 1570
现代 CSS 是一个强大的工具，您可以使用它来创建许多高级用户界面（UI）功能。在过去，这些功能依赖于 JavaScript 库。在本指南中，您将设置一些 CSS 行来在网页上创建一个滚动视差效果。您将使用上的图片作为占位符背景图像。完成本教程后，您将拥有一个具有纯 CSS 滚动视差效果的网页。
css3文字上下滚动切换特效
weixin_53666393的博客
03-16 640
css3文字上下滚动切换特效
vue3实现上下无缝滚动效果
lee_amazing的博客
06-02 2603
vue3实现上下无缝滚动效果
css实现文字滚动
yy祝的博客
12-26 5267
不使用marquee标签，使用css实现简单的文字横向滚动效果
js实现文本上下来回滚动
10-20
在本文中，我们将深入探讨如何使用JavaScript来实现文本的上下来回滚动效果。 首先，实现文本滚动通常涉及到对HTML元素的样式控制和定时器的运用。在这个示例中，使用了jQuery库，它是一个轻量级的JavaScript库，...
Js+CSS实现的间断和不间断文本滚动代码
10-28
总的来说，这个示例展示了如何结合 JavaScript 和 CSS 实现两种不同的文本滚动效果：不间断滚动和间断滚动。通过调整参数 `speed` 和 `delay`，我们可以自定义滚动的速度和间断的时长，以适应不同场景的需求。这种...
css3文字上下滚动切换特效.zip
10-14
3. **jQuery控制**：在文档加载完成后，使用jQuery选择需要滚动的文字元素，并添加或移除特定的CSS类来启动或停止动画。例如： ```javascript $(document).ready(function() { $('.scrolling-text').addClass('...
html+css+javascript实现歌词滚动效果
02-24
在这个项目中，我们将探讨如何利用这三者来实现一个歌词滚动效果，就像许多音乐播放器中常见的那样。当歌曲播放时，歌词会按照时间轴滚动，并在当前播放的歌词上进行高亮和放大处理，确保其始终居中显示。 首先，...
js 上下文字滚动效果
10-29
### JS上下文字滚动效果知识点详解 #### 一、概述 在网页设计中，为了增加页面的动态效果，提升用户体验，常常会使用JavaScript来实现各种特效，其中“上下文字滚动效果”是非常常见的一种。这种效果通常用于展示...
CSS：mix-blend-mode属性（设置元素的混合模式）
最新发布
m0_65029152的博客
07-24 944
本文主要记录CSS中，mix-blend-mode属性的相关内容，并实现页面中的文字适配背景效果；
CSS学习笔记
ngczx的博客
07-23 454
CSS学习笔记
【前端 02】新浪新闻项目-初步使用CSS来排版
delepaste的博客
07-23 1255
在CSS中，页面上的每个元素都可以被看作是一个盒子，这个盒子由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。这四个部分共同构成了元素的盒模型，决定了元素在页面上的位置和大小。内容区域（Content）：元素的实际内容区域，如文本、图片等。内边距区域（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框的距离。边框区域（Border）：围绕内边距和内容区域的边界，可以设置颜色、宽度和样式。
CSS技巧专栏：一日一例 11 -纯CSS实现多彩渐变按钮系列特效
uu0216的博客
07-24 567
这是一个系列的按钮，它们具有共同的特点：底层按钮层，具有一个彩色的渐变边框，上层是依据hover效果需要，可以是渐变，可以时白色。鼠标hover效果都是一样的：背景色位移或变化。本篇文章仅介绍第三个按钮的做法，其他的做法，我会写在源文件里，但不写在本篇里。
使用jQuery实现楼层滚动效果
在JavaScript编程中，实现楼层滚动效果通常涉及到DOM操作、事件监听和动画效果。在这个实例中，开发者首先通过`querySelectorAll`方法获取所有楼层元素（`.layer`类）和楼层导航按钮（`li`元素）。接着，遍历每个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值