html文字向左滚动插件

 前段时间开发项目的时候，需要在文字超过规定长度之后使用一个文字向左滚动的插件。百度了一波效果不怎么样，世面上的插件都比较重，比较繁琐，而且不能满足实际需要。所以只好自己借鉴着其他插件写了一个，经过实际测试效果还不错，在此分享一下。

首先要有一个有规定宽度的<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 + '&nbsp;&nbsp;&nbsp;&nbsp;';

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

}

原理我就不过多阐述了，目测效果是很好的，滚动比较平滑