一个向上连续滚动播出的动态，很简单

最新推荐文章于 2022-01-21 17:13:08 发布

前端小白鲨

最新推荐文章于 2022-01-21 17:13:08 发布

阅读量256

点赞数

分类专栏： web前端技术移动开发 javascript

本文链接：https://blog.csdn.net/m0_37909187/article/details/100074678

版权

web前端技术同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

javascript

13 篇文章 0 订阅

订阅专栏

移动开发

12 篇文章 1 订阅

订阅专栏

// 一些网站新闻连续滚动播出，我也就分享一下，首先引入jq，写个方法调用就可以了

<style>
       *{
         margin:  0 ;
         padding: 0;
       }
       ul {list-style: none;}
      .data{
          width: 100%;
          height: 4.5rem;
          background-color: #fff;
          margin:  0 auto;
          border-radius: .3rem;
          margin-top: 1rem;
          margin-bottom: 2rem;
          overflow: hidden;
      }
    .data ul{
      /* border: 1px solid #000; */
    }
    .data ul li{
        width: 100%;
        height: 1rem;
        font-size: 14px;
        margin-bottom: .2rem;
    }

    </style>

<body>
    <div class="data">
      <ul>
        <li>恭喜李XX获取名额，等待开奖</li>
        <li>恭喜王某获取名额，已领奖</li>
        <li>恭喜张某获取名额，待开奖</li>
        <li>恭喜孙某获取名额，已发送</li>
        <li>恭喜赵某获取名额，发送中</li>
      </ul>
    </div>
</body>

 <script>
  
       function autoscroll(obj){
          //  -1rem 是li标签的高度 向上滚动1rem 
            $(obj).find("ul:first").animate({marginTop:"-1rem"},1000,function(){
            $(this).css("marginTop","0px").find("li:first").appendTo(this)
        })
     }
     setInterval('autoscroll(".data")',2000);
 </script>

前端小白鲨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个向上连续滚动播出的动态，很简单

// 一些网站新闻连续滚动播出，我也就分享一下，首先引入jq，写个方法调用就可以了<style> *{ margin: 0 ; padding: 0; } ul {list-style: none;} .data{ width: 100%; ...
复制链接

扫一扫