原生js利用scrollTop属性完成的文字无缝轮播

来源：互联网发布：ubuntu比windows流畅编辑：程序博客网时间：2024/06/02 10:22

用scrollTop属性完成的文字无缝轮播

在写效果之前，我们必须知道用到的知识哈:
scrollTop意义：con里面文档的顶部相对于它自己的偏移量，也就是父元素con里面的文档向上翻动的高度
下面为我亲测的例子，很简单一看就能明白scrollTop的含义：
首先是css样式：

<style>    * {margin: 0;padding: 0;}    ul li {list-style: none;}    #con {width: 300px;height: 200px;margin: 50px;background-color: #fff;border: 1px solid #000;overflow: auto;}    ul li {display: block;height: 20px;background-color: #ccc;padding: 10px;        border-bottom: 1px solid #fff;}#sTop{background: #ccc;}</style>

接下来是body体的内容：

<body>      <div id="con">          <ul id="con1">              <li>11111111111</li>              <li>222222222222</li>              <li>3333333333333333</li>              <li>44444444444444</li>              <li>5555555555555</li>              <li>66666666666</li>              <li>777777777777</li>          </ul>          <ul id="con2"><li></li></ul>      </div>      <input type="text" id="sTop"></body>

下面的是js代码，效果：当鼠标放上去，轮播暂停，鼠标移出，轮播开始：

<script>    window.onload = function () {        var con = document.getElementById('con');        var scrollNum = document.getElementById('sTop');        var con1 = document.getElementById('con1');        var con2 = document.getElementById('con2');        console.log(con1.offsetHeight)        con2.innerHTML = con1.innerHTML; //克隆con1          function scTop() {            if (con.scrollTop >= con1.offsetHeight) {                con.scrollTop = 0;            } else {                con.scrollTop++;            }        }        var setTime = setInterval(scTop, 50);        con.onmouseover = function () {            clearInterval(setTime);        }        con.onmouseout = function () {                setTime = setInterval(scTop, 50);            }            //scrollTop意义：con里面文档的顶部相对于con的偏移量，也就是里面文档向上翻动的高度          scrollNum.innerHTML = con.scrollTop;        con.onscroll = function () {            scrollNum.value = con.scrollTop;        }    }</script>

运行效果如下所示：
这里写图片描述

其中233.6是当前的scrollTop的值

这里写图片描述

1 0