js实现无缝滚动的水平公告

js实现无缝滚动的水平公告

// css
.box {
    margin: 50px auto;
    padding: 10px;
    width: 1000px;
    height: 35px;
    line-height: 35px;
    border: 1px dashed red;
    background: lightgoldenrodyellow;
}

.wrap {
    white-space: nowrap;
    height: 35px;
    overflow: hidden;
}

.wrap span {
    color: #ff4343;
    font-weight: bold;
    font-size: 16px;
}

.start, .end {
    display: inline-block;
}

// html
<div id="box" class="box">
    <div id="wrap" class="wrap">
        <div id="start" class="start">
            <span>告示：</span>Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue
            采用自底向上增量开发的设计。Vue的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
        </div>
    </div>
</div>

方法1：当滚动到末尾，将scrollLeft设为0

// js
var wrap = document.getElementById('wrap');
var start = document.getElementById('start');
var end = document.getElementById('end');
var timer = window.setInterval(function () {
  var curLeft = wrap.scrollLeft;
  wrap.scrollLeft = curLeft + 10;
  var newLeft = wrap.scrollLeft;
  if (curLeft === newLeft) { // 利用scrollLeft存在边界值，若累加前和累加后的值相等，就可以判断已经达到最大值
    wrap.scrollLeft = 0; 
  }
}, 100)

这种方法，设置scrollLeft=0时，会有闪动，体验不佳

方法2：利用两个内容相同的div，当第一个div消失，立即让第一个div的scrollLeft为0，由于有第二个一模一样的内容，所以看起来是连续的

<div id="box" class="box">
    <div id="wrap" class="wrap">
        <div id="start" class="start">
            <span>告示：</span>Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue
            采用自底向上增量开发的设计。Vue的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
        </div>
        <div id="end" class="end">
            <span>告示：</span>Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue
            采用自底向上增量开发的设计。Vue的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
        </div>
    </div>
</div>

var box = document.getElementById('box');
var wrap = document.getElementById('wrap');
var start = document.getElementById('start');
var startWidth = getStyle(start, 'width');

function move() {
  wrap.scrollLeft++;
  if (wrap.scrollLeft >= startWidth) {
    wrap.scrollLeft = 0;
  }
}
var timer = window.setInterval(move, 10);
box.onmouseover = function () {
  window.clearInterval(timer);
};
box.onmouseout = function () {
  timer = window.setInterval(move, 10);
};

// 获取css的值
function getStyle(ele, attr) {
 var val = null, reg = null;
 if (window.getComputedStyle) {
   val = window.getComputedStyle(ele, null)[attr];
 } else {
   val = ele.currentStyle[attr];
 }
 reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i; // 正则匹配单位,若带有px等单位，将单位剔除掉
 return reg.test(val) ? parseFloat(val) : val;
}