JSFiddle - React, Tailwind, and code Playground
http://stackoverflow.com/questions/337330/javascript-marquee-to-replace-marquee-tags
HTML
<div id="marquee">
1 Hello world! 2 Hello world! <a href="#">3 Hello world!</a>
</div>
CSS
#marquee {
background: #eee;
overflow: hidden;
white-space: nowrap;
}
JavaScript
(function () {
function start_marquee() {
function go() {
i = i < width ? i + step : 1;
m.style.marginLeft = -i + 'px';
}
var i = 0,
step = 3,
space = ' ';
var m = document.getElementById('marquee');
var t = m.innerHTML; //text
m.innerHTML = t + space;
m.style.position ='up'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789
var width = (m.clientWidth + 1);
m.style.position = '';
m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space;
if (m.addEventListener) {
m.addEventListener('mouseenter', function () {
step = 0;
}, false);
m.addEventListener('mouseleave', function () {
step = 3;
}, false);
}
var x = setInterval(go, 50);
}
if (window.addEventListener) {
window.addEventListener('load', start_marquee, false);
} else if (window.attachEvent) { //IE7-8
window.attachEvent('onload', start_marquee);
}
})();