Beispiel: ohne großes Framework
HTML:
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ticker</title>
</head>
<body>
<div class="ticker"><a href="/JavaScript-Ticker">Beispiel Ticker mit Link auf sich selbst</a></div>
<script id="ticker.js" src="ticker.js"></script>
</body>
</html>JavaScript:
// coding: utf-8
/*! Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
'use strict';
function Ticker(el) {
var ticker = el;
for (var i=ticker.childNodes.length-1; i >= 0; i--) {
//TEXT_NODE
if (ticker.childNodes[i].nodeType == 3) {
ticker.removeChild(ticker.childNodes[i]);
}
}
var link = ticker.firstElementChild;
if (link) {
var width = (link.style.width ? parseFloat(link.style.width, 10) : link.offsetWidth) + 75;
var cnt = Math.ceil(el.offsetWidth / width) ;
for (let i = 0; i < cnt; i++) {
ticker.insertBefore(link.cloneNode(true), link);
}
var value = 0;
var tick = function() {
value--;
if (value < -width) {
value = 0;
ticker.appendChild(ticker.childNodes[0]);
};
for (let i = 0; i <= cnt; i++) {
ticker.childNodes[i].style.left = i*width+value+'px';
}
window.requestAnimationFrame(tick);
};
window.requestAnimationFrame(tick);
}
}
function loadCSS(name, callback) {
var style = document.createElement("link");
style.type = 'text/css';
style.addEventListener('load', function () {
callback();
});
// get missing stylesheet from same path
let script = document.getElementById('ticker.js');
let filepath = script.getAttribute('src').split('/').slice(0, -1).join('/');
style.href = filepath + '/' + name;
style.id = name;
style.rel = 'stylesheet';
document.head.appendChild(style);
}
var els = document.querySelectorAll('div.ticker');
if (els.length > 0) {
let css = 'ticker.css';
if (!document.getElementById(css)) {
loadCSS(css, init);
} else {
init();
}
function init() {
for (var i = 0; i < els.length; i++) {
new Ticker(els[i]);
}
}
}
})();
StyleSheet:
/* coding: utf-8 */
.ticker {
border: 1px solid black;
height: 28px;
overflow: hidden;
position: relative;
white-space: nowrap;
}
.ticker a {
display: inline-block;
position: absolute;
top: 0;
text-decoration: none;
}
