无限上下滚动的获奖列表

最新推荐文章于 2023-10-31 15:57:32 发布

fechild

最新推荐文章于 2023-10-31 15:57:32 发布

阅读量471

点赞数

分类专栏： JavaScript基础入门文章标签：广告滚动

本文链接：https://blog.csdn.net/cotexarm7/article/details/79110005

版权

JavaScript基础入门专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<div class="wrap">
    <span class="mt10">获得一份1</span>
    <span class="mt10">获得一份2</span>
    <span class="mt10">获得一份3</span>
    <span class="mt10">获得一份4</span>
    <span class="mt10">获得一份5</span>
    <span class="mt10">获得一份6</span>
    <span class="mt10">获得一份7</span>
    <span class="mt10">获得一份8</span>
    <span class="mt10">获得一份9</span>
    <span class="mt10">获得一份10</span>
    <span class="mt10">获得一份11</span>
    <span class="mt10">获得一份12</span>
    <span class="mt10">获得一份13</span>
 </div>

css

 .wrap {
    width: 400px;
    height: 200px;
    border: 1px solid red;
    background-color: grey;
    overflow: scroll;
  }
  .wrap span {
    display: block;
    background-color: white;
    width: 100%;
    height: 20px;
    line-height: 20px;
    transition: all ease 500ms;
    -webkit-transition: all ease 500ms;
  }
  .mt10 {
    margin-top: 10px;
  }
  .mt-20 {
    margin-top: -20px;
  }

var wrap = document.querySelector('.wrap')
  var firstChild = null;
  setInterval(() => {
    firstChild = wrap.children[0]
    firstChild.classList.remove('mt10')
    firstChild.classList.add('mt-20')
    setTimeout(() => {
      wrap.appendChild(firstChild)
      firstChild.classList.remove('mt-20')
      firstChild.classList.add('mt10')
    }, 500)
  }, 1000)

效果演示：