js实现文本的向上无限滚动轮播

最新推荐文章于 2024-04-05 18:17:54 发布

编程大西瓜

最新推荐文章于 2024-04-05 18:17:54 发布

阅读量807

点赞数 2

文章标签： javascript css webview

本文链接：https://blog.csdn.net/hen12/article/details/125254927

版权

效果图如下：

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>无限滚动</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="./css/work.css" type="text/css" />
  <script src="./js/work.js"></script>

</head>

<body>
  <ul class="ul">
    <li class="li">1.三部门发文规范网络直播营利行为</li>
    <li class="li">2.上海昨日新增本土358+4144"</li>
    <li class="li">3.离沪须持"核酸+抗原"双阴性证明</li>
    <li class="li">4.一图了解道路交通违法记分新规</li>
    <li class="li">5.科兴中维去年靠疫苗盈利或超800亿</li>
    <li class="li">6.山东一孕妇身怀四胞胎生产不同天</li>
  </ul>
</body>

</html>

CSS:

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.ul{
  list-style: none;
  width: 300px;
  height: 77px;
  margin: 0 auto;
  border:1px solid rgba(0, 0, 0, .8);
  overflow: hidden;
  transform: translate(0,0,0);
  margin-top: 100px;
  &:hover{
    cursor: pointer;
  }
  .li{
    list-style: none;
    height: 25px;
    line-height: 25px;
    transform: translate(0,0,0);
    &:hover{
      background-color: rgba(0, 0, 0, .1);
    }
  }
}

JS:

let id = 0
let li = null
const start = () => {
  let ul = document.getElementsByClassName('ul')[0]
  if (id) {
    clearInterval(id)
  }
  id = setInterval(() => {
    let firstLi = ul.firstElementChild
    li = firstLi.cloneNode(true)
    let marginTop = Number.parseFloat(getComputedStyle(firstLi, null).marginTop)
    marginTop -= 0.1
    firstLi.style.marginTop = marginTop + 'px'
    if (marginTop <= -25) {
      marginTop = 0
      li.style.marginTop = marginTop + 'px'
      ul.removeChild(firstLi)
      ul.appendChild(li)
    }
  }, 0)
}
const stop = () => {
  if (id) {
    clearInterval(id)
  }
}

onload = () => {
  start()
  let ul = document.getElementsByClassName('ul')[0]
  ul.addEventListener('mouseenter', stop, false)
  ul.addEventListener('mouseleave', start, false)
}