跑马灯样式

简介: 跑马灯样式


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


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


希望能帮助到您~~


相关文章
|
7月前
|
缓存 前端开发
样式
样式
66 3
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【001】
「HTML+CSS」--自定义按钮样式【001】
328 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【003】
「HTML+CSS」--自定义按钮样式【003】
125 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【004】
「HTML+CSS」--自定义按钮样式【004】
511 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【002】
「HTML+CSS」--自定义按钮样式【002】
120 0
实现简易手风琴样式
蓝桥最新一期的楼赛是实现手风琴样式,这个我们可以考虑到几个解决方案,我们先来看题
99 1
实现简易手风琴样式
|
前端开发
常用样式
常用样式
122 0
|
前端开发
CSS 鼠标样式和手指样式
巧合要用到鼠标样式效果,就顺便整理了下十五种CSS鼠标样式,小例子供大家使用啊。CSS鼠标样式语法如下: 任意标签中插入 style="cursor:*"   例 子:&lt;span style="cursor:*"&gt;文本或其它页面元素&lt;/span&gt;  &lt;a href="#" style="cursor:*"&gt;文本或其它页面元素&lt;/a&gt;
1914 0
|
物联网
点对点通信实现跑马灯
点对点通信实现跑马灯 内容简介 代码解析 全部代码
209 0