欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

公告栏文本横向循环滚动

发布时间：2023/12/16 编程问答 40 豆豆
生活随笔 收集整理的这篇文章主要介绍了 公告栏文本横向循环滚动 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1 效果展示

2 动画实现

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.wrap{padding: 20px;height: 30px;line-height: 30px;display: flex;background-color: pink;align-items: center;}.wrap .tip{font-weight: 700;font-size: 16px;}.wrap .content{flex: 1;height: 100%;border: 1px solid #888;font-size: 14px;overflow: hidden;}.wrap .content .text{/* 必须设置为行内块元素，让元素宽度自动撑开 */display: inline-block;padding-left: 100%;white-space: nowrap;animation: autoScroll 15s linear infinite;}@keyframes autoScroll{0%{transform: translateX(0);}100%{transform: translateX(-100%);}}</style> </head> <body><div class="wrap"><span class="tip">公告：</span><div class="content"><span class="text">（一）理论学习情况；（二）贯彻执行党的路线、方针、政策、国家法律法规的情况；（三）贯彻执行民主集中制的情况；（四）履行岗位职责的情况(在工作中采取的方法措施、成绩和经验)；（五）存在问题及今后努力方向。</span></div></div> </body> </html>

3 js实现

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.wrap{padding: 20px;height: 30px;line-height: 30px;display: flex;background-color: pink;align-items: center;}.wrap .tip{font-weight: 700;font-size: 16px;}.wrap .content{flex: 1;height: 100%;border: 1px solid #888;font-size: 14px;overflow: hidden;}.wrap .content .text{padding-left: 100%;padding-right: 100%;white-space: nowrap;}</style> </head> <body><div class="wrap"><span class="tip">公告：</span><div class="content"><span class="text">（一）理论学习情况；（二）贯彻执行党的路线、方针、政策、国家法律法规的情况；（三）贯彻执行民主集中制的情况；（四）履行岗位职责的情况(在工作中采取的方法措施、成绩和经验)；（五）存在问题及今后努力方向。</span></div></div><script>const content = document.querySelector('.content')const text = document.querySelector('.text')console.log(content.clientWidth, content.scrollWidth, text.offsetWidth)setInterval(() => {content.scrollLeft++if(content.clientWidth + content.scrollLeft >= /*content.scrollWidth*/text.offsetWidth){content.scrollLeft = 0}}, 20);</script> </body> </html>

总结

以上是生活随笔为你收集整理的公告栏文本横向循环滚动的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。