CSS实现文字滚动，类型京东商城公告栏

最新推荐文章于 2024-06-04 12:45:46 发布

转载最新推荐文章于 2024-06-04 12:45:46 发布 · 290 阅读

本文介绍了一种使用CSS实现的纯滚动公告栏效果，通过设置特定的HTML结构和CSS样式，配合JavaScript定时器，实现了公告内容的自动滚动更新，无需引入额外的库文件。

实现文字滚动，第一时间想用swiper进行，但是需求功能较少，不需要引用外部swiper.js，直接用CSS的animate属性实现文字滚动，2秒滚动一次，实现如下:

                
                  <div class="notice">
                
                
 <ul>
                
 <li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li>
                
 <li>第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告</li>
                
 <li>第3条公告第3条公告第3条公告第3条公告第3条公告第3条公告</li>
                
 <li>第4条公告第4条公告第4条公告第4条公告第4条公告第4条公告</li>
                
 </ul>
                

                  </div>

                div,ul,li{margin: 0;padding: 0}/*先初始化一下默认样式*/
                
.notice {
                
 width: 300px;/*单行显示，超出隐藏*/
                
 height: 35px;/*固定公告栏显示区域的高度*/
                
 padding: 0 30px;
                
 background-color: #b3effe;
                
 overflow: hidden;
                
}
                
.notice ul li {
                
 list-style: none;
                
 line-height: 35px;
                
 /*以下为了单行显示，超出隐藏*/
                
 display: block;
                
 white-space: nowrap;
                
 text-overflow: ellipsis;
                
 overflow: hidden;
                
}

                function noticeUp(obj,top,time) {
                
 $(obj).animate({
                
 marginTop: top
                
 }, time, function () {
                
 $(this).css({marginTop:"0"}).find(":first").appendTo(this);
                
 })
                
}
                

                
 setInterval("noticeUp('.notice ul','-35px',500)", 2000);