使用js原生代码实现类似新闻列表的滚动 题目来自4399小游戏2020年前端笔试编程题

admin管理员组

文章数量:1566361

新闻列表的滚动循环播放

• • html代码
  • CSS代码
  • Script代码
  • 总结

题目要求：
要求实现以下页面，其中列表项是滚动循环播放的，而且每次只显示3个，当鼠标经过的时候停止播放，鼠标离开继续播放

const NOTICE_LIST = [
      '恭喜罗X获得特等奖 别墅一套',
      '恭喜张4获得一等奖 跑车一辆',
      '恭喜张5获得二等奖 华为手机一部',
      '恭喜张6获得二等奖 华为手机一部',
      '恭喜张7获得三等奖 小米手机一部',
      '恭喜张8获得三等奖 小米手机一部',
      '恭喜张9获得三等奖 小米手机一部',
    ]

html代码

<!-- 外部盒子 -->
  <div class="container">
    <!-- 标题盒子 -->
    <div class="title">
      <div class="tborder"></div>
      <h3>最近通知</h3>
    </div>
    <!-- 通知盒子 -->
    <div class="notice">
      <ul id="con1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul id="con2"></ul>
    </div>
  </div>

CSS代码

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .container {
      width: 300px;
    }

    .title {
      border-bottom: 1px solid #ccc;
      height: 50px;
      line-height: 50px;
    }

    .title .tborder {
      width: 10px;
      height: 40px;
      margin-right: 20px;
      margin-top: 5px;
      background-color: orange;
      float: left;
    }

    h3 {
      float: left;
    }

    li {
      list-style: none;
    }

     /* 这里盒子的高度是只需要容纳3个长度即可 */
    .notice {
      margin: 20px;
      height: 120px;
      overflow: hidden;

    }

    ul li {
      padding: 10px;
    }

    #con1 {
      overflow: hidden;
    }
  </style>

Script代码

<script>
    const NOTICE_LIST = [
      '恭喜罗X获得特等奖 别墅一套',
      '恭喜张4获得一等奖 跑车一辆',
      '恭喜张5获得二等奖 华为手机一部',
      '恭喜张6获得二等奖 华为手机一部',
      '恭喜张7获得三等奖 小米手机一部',
      '恭喜张8获得三等奖 小米手机一部',
      '恭喜张9获得三等奖 小米手机一部',
    ]
    //获取数据源
    var notice = document.querySelector('.notice')

    var ul = notice.querySelector('ul')

    var lis = ul.querySelectorAll('li')

    //循环遍历
    for (var i = 0; i < lis.length; i++) {
      lis[i].innerHTML = NOTICE_LIST[i]
    }

    var box = document.querySelector('.notice')
    var con1 = document.getElementById("con1")
    var con2 = document.getElementById("con2")
    con2.innerHTML = con1.innerHTML
    //先进行滚动视图
    function ScrollUp() {
      // 当第一个完全被卷上去之后 将他的被卷上去的高度重新置0 重头开始
      if (box.scrollTop >= con1.scrollHeight) {
         box.scrollTop = 0;
      } else
        box.scrollTop++;
      // console.log(box.scrollTop);
    }
    var i = setInterval("ScrollUp()", 50);

	// 鼠标经过 停止播放
    con1.onmouseover = function () {
      clearInterval(i)
    }
    // 鼠标离开 继续播放
    con1.onmouseout = function () {
      i = setInterval("ScrollUp()", 50);
    }


  </script>

总结

实现的思路大体如下
（1）首先需要在列表外套一个盒子，盒子的高度是只需要那几行的高度（可以在chorm中调试），然后使用overflow为hidden将剩余的隐藏起来
（2）接着创建一个在原有的ul下面创建一个新的ul 内容为空
（3）编写script代码

• 使用定时器
• 获取数据源
• 将旧的ul的内容完全复制给新的ul
• 使用 box.scrollTop 进行移动，当移动到大于第一个ul的scrollHeight的，即说明第一个已经完全滚动上去了，这个时候需要将 box.scrollTop 置0
• 给鼠标经过和离开注册事件

本文标签： 小游戏笔试题目类似年前