这里的公告是要做成,跑马灯的样式,文字是会移动并且隐藏掉的。
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);
希望能帮助到您~~