css实现div内文字自动滚动

news2024/12/24 2:20:38

网上找了好久,终于找到了个能实现的,把它整理一下。
需求:表格内字体过长实现自动滚动
实现思路如下:
html:

<div class="item-column" style="background: rgb(12, 87, 154); width: 18%; height: 60px; line-height: 60px;"><p class="scrollDiv">让我更热个热更热个人人人歌更让人热啊隔热个人</p></div>

css:

.item-column {
  height: 200px;
  width: 300px;
  overflow:hidden;
}

.item-column>p {
    white-space: nowrap; //设置不换行
}

.scrollDiv {
    position: relative;
    animation: scroll 30s infinite linear; //滚动速度,值越大越慢
}

@keyframes scroll {
	//滚动范围
    0% { left: 5%; }
    100% { left: -100%; }
}

js:

//根据class获取所有的集合,然后遍历判断实际内容长度是否大于可视区域,是的话就加上带滚动效果的class
 var itemColumns = document.getElementsByClassName("item-column");
                for (let i = 0; i < itemColumns.length; i++) {
                    var column = itemColumns[i];
                    if (column.scrollWidth > column.clientWidth) {
                        var scrollColum = column;
                        var d = column.scrollWidth - column.clientWidth;
                    	$(column).find("p").addClass("scrollDiv");
                    }
                }

效果图:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/887266.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Msvcr120.dll文件缺失怎么办.msvcr120.dll错误的解决方法

在使用某些软件时你是否有遇到过Msvcr120.dll文件缺失&#xff0c;msvcr120.dll是 Microsoft Visual C Redistributable 中的一个重要文件&#xff0c;所以它的缺失会导致应用程序无法正常使用或崩溃。那么出现这种情况应该怎么办呢&#xff1f;以下教大家几种解决方法。 一.导…

线性代数(四) 特征值相似矩阵

前言 前面主要讲述的是方程组和矩阵的关系&#xff0c;现在了解下矩阵和矩阵的关系 方阵的特征值与特征向量 假设A为n阶方阵&#xff0c;对于一个数 λ \lambda λ 若存在&#xff1a;非零列向量 α \alpha α&#xff0c;使得&#xff1a; A α ⃗ λ α ⃗ A\vec{\alp…

轮腿机器人的PID控制

1 PID介绍 PID&#xff08;Proportional Integral Derivative&#xff09;控制系统。其实质是根据输入的偏差值&#xff0c;按比例、积分、微分的函数关系进行运算&#xff0c;运算结果用以输出进行控制。它是在长期的工程实践中总结出来的一套控制方法&#xff0c;实际运行经…

在CentOS 7上使用kubeadm部署Kubernetes集群

如有错误&#xff0c;敬请谅解&#xff01; 此文章仅为本人学习笔记&#xff0c;仅供参考&#xff0c;如有冒犯&#xff0c;请联系作者删除&#xff01;&#xff01; 前言&#xff1a; Kubernetes是一个开源的容器编排平台&#xff0c;用于管理和自动化部署容器化的应用程序。…

C#8.0本质论第三章--更多数据类型

C#8.0本质论第三章–更多数据类型 3.1类型的划分 一个类型要么是值类型&#xff0c;要么是引用类型。区别在于拷贝方式&#xff1a;值类型数据总是拷贝值&#xff1b;引用类型的数据总是拷贝引用。 3.1.1值类型 3.1.2引用类型 引用类型的变量存储对数据存储位置的引用。 3.…

Datawhale Django入门组队学习Task02

Task02 首先启动虚拟环境&#xff08;复习一下之前的&#xff09; 先退出conda的&#xff0c; conda deactivate然后cd到我的venv下面 &#xff0c;然后cd 到 scripts&#xff0c;再 activate &#xff08;powershell里面&#xff09; 创建admin管理员 首先cd到项目路径下&a…

笨办法学python3进阶篇pdf,笨方法学 python3怎么样

本篇文章给大家谈谈《“笨办法”学python(第3版)》&#xff0c;以及笨办法学python3进阶篇pdf下载&#xff0c;希望对各位有所帮助&#xff0c;不要忘了收藏本站喔。 接着前天的总结 习题21&#xff1a;函数可以返回某些东西 定义函数的加减乘除&#xff0c;以及嵌套使用 习题2…

PHP实现轻量级WEB服务器接收HTTP提交的RFID刷卡信息并回应驱动读卡器显示播报语音

本示例使用的读卡器&#xff1a;RFID网络WIFI无线TCP/UDP/HTTP可编程二次开发读卡器POE供电语音-淘宝网 (taobao.com) <?php mb_http_output(utf-8); $port88; $socket socket_create(AF_INET, SOCK_STREAM, SOL_TCP); $bool socket_bind($socket, "0.0.0.0",…

深度学习入门-3-计算机视觉-卷积神经网络

一、计算机视觉 1.概述 计算机视觉作为一门让机器学会如何去“看”的学科&#xff0c;具体的说&#xff0c;就是让机器去识别摄像机拍摄的图片或视频中的物体&#xff0c;检测出物体所在的位置&#xff0c;并对目标物体进行跟踪&#xff0c;从而理解并描述出图片或视频里的场…

Python进阶系列(二)— 类与对象

对象 Python是一个面向对象的语言Python的内置类型实例都是对象对象包含数据和方法集合 类 类是对现实中的事物进行抽象的数据表示&#xff0c;用来定义对象们的数据结构&#xff0c;对象由实例化类获得。 例如这是一个玩家类&#xff0c;玩家有x&#xff0c;y和生命值三个…

程序的机器级表示

程序的机器级表示 程序编码数据格式访问信息的方式 所有的高级语言&#xff0c;都会被计算机翻译为机器代码&#xff0c;然后再根据汇编代码生成可执行的机器代码。二进制的机器代码我们人类肯定是读不懂了&#xff0c;但是汇编代码还是可以简单了解一下的。CPU 的 PC、寄存器、…

ATTCK覆盖度97.1%!360终端安全管理系统获赛可达认证

近日&#xff0c;国际知名第三方网络安全检测服务机构——赛可达实验室&#xff08;SKD Labs&#xff09;发布最新测试报告&#xff0c;360终端安全管理系统以ATT&CK V12框架攻击技术覆盖面377个、覆盖度97.1%&#xff0c;勒索病毒、挖矿病毒检出率100%&#xff0c;误报率0…

详解web前端长度单位(px、em、rem、%、vw/vh、vmin/vmax、vm、calc())

1&#xff09;简介 在前端开发中&#xff0c;会遇到各种不同类型的长度单位&#xff0c;比如px,em,rem等。 而整体的长度单位分为两大类&#xff1a; 绝对长度单位包括&#xff1a;in,cm, mm, q, pt, pc, px 相对长度单位包括&#xff1a;em, rem, %, vw, vh, vmax, vmin, vm,…

python基础语法 百度网盘,python基础语法个人笔记

大家好&#xff0c;本文将围绕python基础语法 百度网盘展开说明&#xff0c;python基础语法个人笔记是一个很多人都想弄明白的事情&#xff0c;想搞清楚python基础语法合集下载需要先了解以下几个事情。 前言 Python是一种多功能语言。它经常用作Web应用程序的脚本语言&#xf…

VSCode无法从Extensions下载工具时,把工具下载到本地并添加到VSCode编辑器

从VSCode 的 Extensions 下载 下载报错&#xff1a;Error while installing ...... extension. Please check the log for more details. 由于内网限制&#xff08;或者其他网络限制&#xff09;无法正常下载扩展工具到VSCode编辑器&#xff0c;可以把工具下载到本地再添加到V…

mysql知识点+面试总结

目录 1 mysql介绍 2 数据库常见语法 3 数据库表的常见语法 4 其他常见语法&#xff08;日期&#xff0c;查询表字段&#xff09; 5 JDBC开发步骤 6 索引 6.1 索引常见语法 7 常见面试总结 8 java代码搭建监控页面 1 mysql介绍 数据库&#xff1a;存储在硬盘上的文件系统…

如何做好科技文献资料的翻译!

我们知道&#xff0c;科技文献是工程技术人员的重要参考文献&#xff0c;翻译科技文献资料有助于促进国内外科技知识和技术的传播。那么&#xff0c;如何做好科技文献资料的翻译&#xff0c;专业科技文献翻译哪家好&#xff1f; 据了解&#xff0c;科技文献翻译是一种以应用为主…

chatglm2-6b模型在9n-triton中部署并集成至langchain实践 | 京东云技术团队

一.前言 近期&#xff0c; ChatGLM-6B 的第二代版本ChatGLM2-6B已经正式发布&#xff0c;引入了如下新特性&#xff1a; ①. 基座模型升级&#xff0c;性能更强大&#xff0c;在中文C-Eval榜单中&#xff0c;以51.7分位列第6&#xff1b; ②. 支持8K-32k的上下文&#xff1b…

【Leetcode】84.柱状图中最大的矩形(Hard)

一、题目 1、题目描述 给定 n n n 个非负整数,用来表示柱状图中各个柱子的高度。每个柱子彼此相邻,且宽度为 1 。 求在该柱状图中,能够勾勒出来的矩形的最大面积。 示例1: 输入:heights = [2,1,5,6,2,3] 输出:10 解释:最大的矩形为图中红色区域,面积为 10示例2:…

【Spring系列篇--关于IOC的详解】

目录 面试经典题目&#xff1a; 1. 什么是spring&#xff1f;你对Spring的理解&#xff1f;简单来说&#xff0c;Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架。 2.什么是IoC&#xff1f;你对IoC的理解&#xff1f;IoC的重要性?将实例化对象的权利从程序员…