活动消息滚动显示

最新推荐文章于 2021-11-21 11:02:55 发布

Anita梅梅

最新推荐文章于 2021-11-21 11:02:55 发布

阅读量700

点赞数

分类专栏： html

本文链接：https://blog.youkuaiyun.com/weixin_42262436/article/details/87858202

版权

html 专栏收录该内容

10 篇文章

订阅专栏

该功能实现了一下图示的小功能，可是区域内，进行消息的滚动显示循环。

// 列表循环滚动

startScrollList = () => {

     setInterval(function () { // 添加定时器，每1.5s进行转换

         $('#activity-list').animate({

              marginTop: '-2rem' // 每次移动的距离

         }, 1000, function () { // 动画运动的时间

             // $(this)指的是ul对象，

             // ul复位之后把第一个元素插入到ul的最后一个元素的位置

            $(this).css({marginTop: '0'}).find('.activity-item:first').appendTo(this)

        })

   }, 1500)

}

<ul id='activity-list' className='activity-list'>
    <li className='activity-item'>
       美女哦&nbsp;&nbsp;获得10奖励&nbsp; 1分钟前
    </li>
    <li className='activity-item'>
       美女哦&nbsp;&nbsp;获得10奖励&nbsp; 1分钟前
    </li>
    <li className='activity-item'>
       美女哦&nbsp;&nbsp;获得10奖励&nbsp; 1分钟前
    </li>
</ul>