前段时间开发项目的时候，需要在文字超过规定长度之后使用一个文字向左滚动的插件。百度了一波效果不怎么样，世面上的插件都比较重，比较繁琐，而且不能满足实际需要。所以只好自己借鉴着其他插件写了一个，经过实际测试效果还不错，在此分享一下。
首先要有一个有规定宽度的<div> 需要一个css样式为：
.marquue { white-space:nowrap;overflow:hidden;}
js部分为：
var timer;
var exp = [];
function scoll() {
var text = document.getElementsByClassName('marquue');
var _text = [];
for (var i = 0; i < text.length; i++) {
_text[i] = text[i].innerText;
}
for (var index = 0; index < exp.length; index++) {
window.clearInterval(exp[index]);
}
exp = [];
// setInterval 实现文字水平滚动
function scrollText1(dom) {
if (dom.offsetWidth< dom.scrollWidth) {
var wordLength = dom.scrollWidth;//文字长度
dom.innerHTML = dom.innerHTML + ' ';
dom.innerHTML += dom.innerHTML;
timer = setInterval(function () {
if (dom.scrollLeft <= dom.scrollWidth/ 2) {
dom.scrollLeft++;
} else {
dom.scrollLeft = 0;
}
}, 1000 / 60);
exp.push(timer);
} else {
}
}
for (var i = 0; i < text.length; i++) {
text[i].innerHTML= _text[i % text.length];
scrollText1(text[i]);}
}
原理我就不过多阐述了，目测效果是很好的，滚动比较平滑
