marquee.js

var Marquee = function(element) {
    if(element)
        this.element = element;
    else {
        this.element = document.createElement('div');
        this.element.className = 'js-marquee';
    }

    this.body = element.firstElementChild;
    if(!this.body) {
        this.body = document.createElement('div');
        this.element.appendChild(this.body);
    }
    this.body.classList.add('js-marquee-body');

    this.intervalHandle = undefined;
    this.interval = 102;
    this.current = 0;
    this.steps = 360;
};
Marquee.prototype.getElement = function() {
    return this.element;
};
Marquee.prototype.getBody = function() {
    return this.body;
};
Marquee.prototype.start = function() {
    if(this.isActive())
        return;
    this.intervalHandle = setInterval(this.update.bind(this), this.interval);
};
Marquee.prototype.stop = function() {
    if(!this.isActive())
        return;
    clearInterval(this.intervalHandle);
    this.intervalHandle = undefined;
};
Marquee.prototype.isActive = function() {
    return this.intervalHandle !== undefined;
};
Marquee.prototype.update = function() {
    this.body.style.left = ((this.element.offsetWidth + this.body.offsetWidth) * (1 - this.currentFloat()) - this.body.offsetWidth).toString() + 'px';
    this.next();
};
Marquee.prototype.currentFloat = function() {
    return Math.min(1, this.current / this.steps);
};
Marquee.prototype.next = function() {
    if(this.current++ >= this.steps)
        this.current = 0;
};
Marquee.newAll = function() {
    var marquees = [],
        elements = document.getElementsByClassName('js-marquee');
    for(var i = 0; i < elements.length; ++i) {
        var marquee = new Marquee(elements[i]);
        marquee.start();
        marquees.push(marquee);
    }
    return marquees;
};