jquery公告栏间隔一定时间滚动一次

Posted 2021-04-08 xxger前端学习

        有些企业站可能会用到类似这种间隔一定时间滚动一次的效果。gif图片录制的时候不可避免有点卡顿，大概效果就是这样。

 

<style>

*{margin:0; padding:0}

ul,li{list-style: none;}

.news-box{width:300px; height: 136px; margin:100px auto; /*overflow: hidden;*/ background:#efefef; }

.tit{ color:#E7350D; font-size:18px; padding:10px;}

.scroll-wrap{height:82px; overflow: hidden;}

.scroll-box li{position: relative; padding:0 10px 10px 10px;  }

.scroll-box h4{font-weight: normal; font-size:14px;}

.scroll-box a{display:block; height: 63px; overflow:hidden; text-indent:20px; text-decoration: none; color:#666; word-break:break-all;}

/*多行省略号，在末尾定位一个span标签显示省略号，可以省掉写脚本的麻烦*/

.scroll-box span{position: absolute;bottom:12px;right:12px;background:#efefef;padding-left:4px;}

.scroll-box a:hover{text-decoration: underline;}

/* 多行超出部分省略的另一种写法，目前仅限于chrome浏览器

 * overflow:hidden;

 * text-overflow:ellipsis;   超出部分...显示

 * display:-webkit-box;    设为弹性盒模型

 * -webkit-line-clamp:3;  设显示3行  

 * -webkit-box-orient:vertical; 设置伸缩盒子的排列方式

 */

</style>

<div class="news-box">

<div class="tit">网站广播</div>

<div class="scroll-wrap">

<ul class="scroll-box">

<li>

<h4>第一条广播</h4>

<a href="#">AAAA第一条广播AAAAAAAAAAAAA第一条广播AAAAAA第一条广播AAAAAAA第一条广播AAAA第一条广播AAAAAA第一条广播AAA第一条广播AAAA</a>

<span>...</span>

</li>

<li>

<h4>第二条广播</h4>

<a href="#">BBBBBBBBBB第二条广播BBBBBBBBBBBBB第二条广播BBB第二条广播B第二条广播BBBBBBBBBBBBBBB第二条广播BBBBBBBBBB</a>

<span>...</span>

</li>

<li>

<h4>第三条广播</h4>

<a href="#">CCC第三条广播CCCCCCCCCC第三条广播CCCCCCCCCCCCCCCCCCCC第三条广播CCCCCCCCCCCCCCCCCCCCCCC第三条广播CCCCCCCCC</a>

<span>...</span>

</li>

<li>

<h4>第四条广播</h4>

<a href="#">DD第四条广播DDDDD第四条广播DDDDDDDDDDDDDDDD第四条广播DDDDDDDDDDDDDDDDDDDDDDDDDDD第四条广播DDDDDDDDDD第四条广播DDDDDD</a>

<span>...</span>

</li>

<li>

<h4>第五条广播</h4>

<a href="#">EEEE第五条广播EEEEEEEE第五条广播EEEEEEEEEEEEE第五条广播EEEEEEEEEEEEEEE第五条广播EEEEEEEEE第五条广播EEEE第五条广播EEEEEE第五条广播EEEEEE</a>

<span>...</span>

</li>

</ul>

</div>

</div>

<script type="text/javascript">

$(function(){

function scroll(){

    //append()被选元素的结尾插入置顶内容

    $('.scroll-box').animate({marginTop:'-92px'},1000,function(){

    $(".scroll-box li").eq(0).appendTo($(".scroll-box"));  

    $(".scroll-box").css('marginTop','-1px');

    });

   }

   setInterval(scroll,2000);

})

</script>