跑马灯样式

简介: 跑马灯样式


这里的公告是要做成,跑马灯的样式,文字是会移动并且隐藏掉的。


HTML:


<div class="notice">
    <div class="yrr">
      <img src="./img/ia_100000018.png" alt="" />
    </div>
    <div class="orr">
      <div class="arr">新乡市企业家联合会是由新乡市区域内的企业家自愿
      加入而组成的,在主管单位新乡市工业和信息化局、登记管理机关新乡市民
      政局的指导和监督管理下开展活动的地方性、联合性、非营利性社会团体组
      织。本会以为企业家服务为宗旨,维护企业家的合法权益,为企业家的成长发
      展创造优良环境;促进企业家守法、自律,开展企业家诚信建设、信用建设、
      自律建设活动;发挥企业家与政府之间的桥梁纽带作用,协调企业家与企业
      、企业家与社会、企业家与劳动者的关系;引导广大企业家爱党、爱国、爱人
      民,为推动新乡市经济社会高质量发展贡献力量。</div>
    </div>
   
    </div>


CSS:


/* 公告 */
.notice {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 90%;
  height: 80px;
  margin-left: 5%;
  background-color: white;
  position: absolute;
  top: 350px;
  opacity: 0.65;
  border-radius: 10px;
  overflow: hidden;
}
.yrr{
  height: 30px;
}
.yrr img {
  padding-left: 10px;
  width: 30px;
  height: 30px;
}
.orr{
  overflow: hidden;
}
.arr{
  width: 220px;
  padding-left: 10px;
  white-space: nowrap;
}


JS:


/* // 获取要展示的元素 */
let arr = document.getElementsByClassName("arr")[0];
/* // 设置初始位置为0px */
let position = 0;
function moveText() {
  /* // 将当前位置向左移动1像素 */
  position -= 1;
  /* // 如果已经到达最右边界,则重新开始从左侧开始 */
  if (position < -arr.scrollWidth) {
  position = 0;
  }
  /* // 更新元素的位置 */
  arr.style.transform = "translateX(" + position + "px)";
}
/* // 每50ms调用moveText函数一次 */
setInterval(moveText, 20);


希望能帮助到您~~


相关文章
|
机器学习/深度学习 算法 搜索推荐
Machine Learning机器学习之决策树算法 Decision Tree(附Python代码)
Machine Learning机器学习之决策树算法 Decision Tree(附Python代码)
|
机器学习/深度学习 自然语言处理 并行计算
Transformer 学习笔记 | Seq2Seq,Encoder-Decoder,分词器tokenizer,attention,词嵌入
本文记录了学习Transformer过程中的笔记,介绍了Seq2Seq模型及其编码器-解码器结构。Seq2Seq模型通过将输入序列转化为上下文向量,再由解码器生成输出序列,适用于机器翻译、对话系统等任务。文章详细探讨了Seq2Seq的优势与局限,如信息压缩导致的细节丢失和短期记忆限制,并引入注意力机制来解决长序列处理问题。此外,还介绍了分词器(tokenizer)的工作原理及不同类型分词器的特点,以及词嵌入和Transformer架构的基础知识。文中包含大量图表和实例,帮助理解复杂的概念。参考资料来自多个权威来源,确保内容的准确性和全面性。
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
489 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
消息中间件 Java Kafka
消息传递新纪元:探索RabbitMQ、RocketMQ和Kafka的魅力所在
【8月更文挑战第29天】这段内容介绍了在分布式系统中起到异步通信与解耦作用的消息队列,并详细探讨了三种流行的消息队列产品:RabbitMQ、RocketMQ 和 Kafka。其中,RabbitMQ 是一个基于 AMQP 协议的开源消息队列系统,支持多种消息模型;RocketMQ 则是由阿里巴巴开源的具备高性能、高可用性和高可靠性的分布式消息队列,支持事务消息等多种特性;而 Kafka 作为一个由 LinkedIn 开源的分布式流处理平台,以高吞吐量和良好的可扩展性著称。此外,还提供了使用这三种消息队列发送和接收消息的代码示例。总之,这三种消息队列各有优势,适用于不同的业务场景。
279 3
|
监控 定位技术 PHP
使用PHP接入纯真IP库:实现IP地址地理位置查询
本文介绍了如何使用PHP接入纯真IP库(QQWry),实现IP地址的地理位置查询。纯真IP库是一个轻量级的IP数据库,数据格式简单,查询速度快,适合Web应用。首先,下载并放置`QQWry.dat`文件到项目目录。接着,通过编写PHP类解析该文件,实现IP查询功能。最后,提供了一个完整的案例演示,展示如何查询IP地址对应的国家和地区信息。该工具适用于用户地理位置分析、访问日志分析和风控系统等场景,具有轻量级、查询速度快、数据更新方便等优点。
|
机器学习/深度学习 流计算
基于simulink的直接转矩控制方法建模与性能仿真
本研究基于Simulink实现直接转矩控制(DTC)建模与仿真,采用电压空间矢量控制及Park、Clark变换,实现电机磁场定向控制。系统通过磁链观测器、转矩估计器等模块,精确控制电机转矩和磁链,提高控制性能。MATLAB2022a版本实现核心程序与模型。
|
Java Maven Kotlin
vertx的学习总结7之用kotlin 与vertx搞一个简单的http
本文介绍了如何使用Kotlin和Vert.x创建一个简单的HTTP服务器,包括设置路由、处理GET和POST请求,以及如何使用HTML表单发送数据。
240 2
vertx的学习总结7之用kotlin 与vertx搞一个简单的http
|
移动开发 前端开发 数据可视化
一份小白前端可视化学习指南——附思维导图
一份小白前端可视化学习指南——附思维导图 前言 因为群里粉丝一直要求我写一篇「可视化入门指南」,今天他来了。其实说起前端可视化,大家所能想到的就是各种图表,大屏。这种看着贼炫酷,而笔者呢工作也一直从事3D前端开发工作,慢慢对图形产生了兴趣。但是呢一直做的是三维的东西,没搞过二维的。大概是2月前开始学习2D的一些东西,然后并写了一些文章,效果还不错。所以我就写一些经验之谈,大佬勿喷。我大概从4个方面去讲我是怎么学习的 「可视化不得不掌握的数学基础」 「svg」方面的学习 「canvas」方面的学习 「可视化中」不得不掌握的「图形算法」 读完本篇文章,你可以大概知道我该怎么去学,需要学什
一份小白前端可视化学习指南——附思维导图
|
Oracle Java 关系型数据库
在Centos7上安装JDK1.8和tomcat8.5的步骤和过程(亲测可用)
该博客文章提供了在CentOS 7系统上安装JDK 1.8和Tomcat 8.5的详细步骤,包括卸载系统自带的OpenJDK和安装Oracle JDK 1.8,以及Tomcat 8.5的安装过程。
|
数据采集 JavaScript 前端开发
使用Python打造爬虫程序之破茧而出:Python爬虫遭遇反爬虫机制及应对策略
【4月更文挑战第19天】本文探讨了Python爬虫应对反爬虫机制的策略。常见的反爬虫机制包括User-Agent检测、IP限制、动态加载内容、验证码验证和Cookie跟踪。应对策略包括设置合理User-Agent、使用代理IP、处理动态加载内容、验证码识别及维护Cookie。此外,还提到高级策略如降低请求频率、模拟人类行为、分布式爬虫和学习网站规则。开发者需不断学习新策略,同时遵守规则和法律法规,确保爬虫的稳定性和合法性。