跑马灯样式

简介: 跑马灯样式


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


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);


希望能帮助到您~~


相关文章
|
3天前
|
人工智能 JSON API
全网刷屏的 Jev 模型正式开放!一手实战测评 + 保姆级教程
全网爆火的 Jev 模型是什么?有什么用?怎么使用?怎么接入 AI 编程工具?效果真的好么?傻子可懂的 Jev 保姆级实战教程 + 项目实战测评来啦
5631 8
|
2天前
|
人工智能 测试技术 API
最近全网爆火的 Jev 到底是什么?适合干什么、怎么用,一篇讲透!
Jev是TypeSafe AI推出的“系统一模型”,不生成文本,专做毫秒级结构化决策:Choice(多选)、Score(打分)、Noul(是非概率)。响应快193倍、成本低444倍,适合工单路由、内容审核、测试定级等高频判断场景。
966 1
最近全网爆火的 Jev 到底是什么?适合干什么、怎么用,一篇讲透!
|
16天前
|
人工智能 自然语言处理 安全
阿里云千问办公 QwenWork详细介绍:产品核心能力、典型场景、价格及常见问题解答
千问办公是阿里云推出的一站式AI办公平台,主打"不止于对话,更注重交付",依托通义千问旗舰大模型,用户一句话即可完成数据分析、PPT生成、视频剪辑等复杂任务,直接输出可用成果。产品深度打通钉钉生态与企业OA,覆盖桌面端、网页端,提供企业标准版198元/人/月等多档订阅方案,新用户注册即赠2000积分,适配工程师、HR、财务等多职业办公场景,成为能动手干活的"全能AI同事"。
3199 9
|
15天前
|
IDE 开发工具
Qoder 上线 Sonus 模型,Computer Use 能力全面增强
Qoder国际版上线全新内置大模型Sonus(/ˈsoʊnəs/),全球领先,专精超长任务执行与电脑操作(Computer Use)。配合Qoder桌面端0.2.3版本,可自主完成编程、金融建模、科研及表格制作等复杂工作。现全面支持Qoder全系产品,效率提升3.2倍。
1783 8
Qoder 上线 Sonus 模型,Computer Use 能力全面增强
|
10天前
|
缓存 IDE Java
【保姆级】Android Studio下载、安装和汉化教程(2026最新)
Android Studio 是 Google 官方推出的免费 Android 应用开发集成环境,基于 IntelliJ IDEA,内置模拟器、调试器、性能分析及 Compose 界面工具,功能全面,文档丰富,是安卓开发首选工具。(239字)
1147 1
|
16天前
|
人工智能 API 内存技术
刚刚 DeepSeek V4.1 Flash 开启内测,1 分钟教你用上!
刚刚 DeepSeek 内测群发布了 DeepSeek V4.1 Flash 中间版本内测的消息,这次的模型采用了新的结构,原生支持多模态、能力更强、速度更快、且成本更低。
2033 15

热门文章

最新文章