不用marquee标签， js 实现文本在页面上无间断 水平方向滚动

场景：

很多人知道这个元素标签marquee， 用来实现内容在窗体中自由自主滚动，就像一个led屏幕上，一直有一行字在滚动。

这个标签确实很方便，可以控制方向，速度等等。

但是，marquee标签却被官方在很早之前就被废弃了。

所以，我们考虑可以自己写一个组件，替代marquee标签。

 

实现：

先上html代码：

<div class="parent">
   <div id="scrollText" class="child"></div>
   <div id="copyScrollText" class="child"></div>
</div>

注释：

parent 用来包裹真正需要滚定的内容。

第一个child用来首次开始滚动弄的内容，第二个child用来接替第一个child继续滚动，保持滚动的连续性。

css 代码：

.parent {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      background: #ccc;
      left: 0;
      top: 0;
    }

    .parent .child {
      position: absolute;
      font-size: medium;
      font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
      right: 0;
      width: auto;
      white-space: nowrap;
      top:50%;
      transform:translateY(-50%)
    }

注释：

样式很明显了，绝对布局，然后设置child的right先为0， 内容垂直居中，不换行，等等。

js代码：

<script src="./jquery.min.js"></script>

var timer = null
var copyScrollTextTimer = null
var scrollText = null
var copyScrollText = null
$('#scrollText').html('滚动的文字啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦')
$('#copyScrollText').html('滚动的文字啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦')
scrollText = document.getElementById("scrollText")
copyScrollText = document.getElementById("copyScrollText")
// 两个div都隐藏到右边，然后拿到数据第一个div开始向左滚动
scrollText.style.right = '-' + scrollText.offsetWidth + 'px' // 将div藏在最右边
copyScrollText.style.right = '-' + copyScrollText.offsetWidth + 'px' // 将div藏在最右边
moveToLeft() // 开始向左移
timer = setInterval(moveToLeft, 20)   // 在指定的毫秒数后调用左移函数
// 开始从右往左滚动
 function moveToLeft(){
      // 当第一个div已经滚到了最左边的时候，重置第一个div, 并清除定时器，因为这个时候第二个div已经在滚动了
      if(parseInt(scrollText.style.right) > document.body.clientWidth) {
        scrollText.style.right = '-' + scrollText.offsetWidth + 'px'
        clearInterval(timer)
      }
      // 当第一个div开始滚到左边的时候，启动第二个div的滚动，这样才能两个div才能无缝衔接，循环滚动； 这个做加20的判断是因为当文本内容的宽带比当前窗体的宽度还大的时候，让衔接的时候晚一些，这样就能多出一些空白，不至于两次衔接挤在一起
      if (scrollText.style.right === (scrollText.offsetWidth > document.body.clientWidth ? 20 : 0 + document.body.clientWidth - scrollText.offsetWidth) + 'px') {
        moveCopyScrollTextToLeft()
        copyScrollTextTimer = setInterval(moveCopyScrollTextToLeft, 20)   // 在指定的毫秒数后调用左移函数
      }
      scrollText.style.right = parseInt(scrollText.style.right)+1+'px'
    }
    // 第二个div从右往左滚动
    function moveCopyScrollTextToLeft() {
      // 当第二个div已经滚到了最左边的时候，重置第二个div, 并清除定时器，因为这个时候第一个div已经在滚动了
      if(parseInt(copyScrollText.style.right) > document.body.clientWidth) {
        copyScrollText.style.right = '-' + copyScrollText.offsetWidth + 'px'
        clearInterval(copyScrollTextTimer)
        
      }
      // 当第二个div开始滚到左边的时候，启动第一个div的滚动，这样才能两个div才能无缝衔接，循环滚动; 这个做加20的判断是因为当文本内容的宽带比当前窗体的宽度还大的时候，让衔接的时候晚一些，这样就能多出一些空白，不至于两次衔接挤在一起
      if (copyScrollText.style.right === (scrollText.offsetWidth > document.body.clientWidth ? 20 : 0  + document.body.clientWidth - copyScrollText.offsetWidth) + 'px') {
        moveToLeft()
        timer = setInterval(moveToLeft, 20)   // 在指定的毫秒数后调用左移函数
      }
      copyScrollText.style.right = parseInt(copyScrollText.style.right)+1+'px'
    }
    window.onbeforeunload = function () {
      if (timer) {
        clearInterval(timer)
      }
      if (copyScrollTextTimer) {
        clearInterval(copyScrollTextTimer)
      }
    }

注释：

代码中的注释很清楚了。

实现的逻辑总结一下就是：

将两个一样的div先都藏在最右边，然后一开始让第一个div先滚动，当第一个div滚动到刚刚碰到最左边的时候，开始滚动第二个div; 这样就不需要等到第一个div完全滚完了之后，再从最右边滚出来；

接着当第一个div完全滚完的时候，也就是div的最右边滚到了网页的最左边的时候，关掉第一个div的滚动。继续第二个div的滚动。

然后等第二个div滚动到刚刚碰到最左边的时候，开始滚动第一个div， 这样就循环起来了，永远不间断的循环滚动。

 

至于滚动：

利用绝对布局，用定时器来控制right的值的变化，从而达到滚动的效果，其实就是div一直在移动，但是由于移动的速度快，看起来就在滚动了。

 

注意：

一定要在网页 onbeforeunload 中给定时器销毁掉，不然，你懂得。

 

扩展：

利用一样的逻辑，可以很简单实现内容从左向右滚动。把right改成left, 其他做相应的改变就可以了。

 

垂直滚动也可以利用这个逻辑，设置top或者bottom，就能吧达到目的。