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;
}