JavaScript Ticker

Beispiel: ohne großes Framework
HTML:
ticker.htm HTML (302 Bytes) 18.01.2022 00:31
<!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:
ticker.js JavaScript (1,9 kByte) 03.08.2024 00:06
// 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:
ticker.css StyleSheet (236 Bytes) 03.08.2024 00:07
/* 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;
}

Kontakt

Udo Schmal
Udo Schmal

Udo Schmal
Softwareentwickler
Ellerndiek 26
24837 Schleswig
Schleswig-Holstein
Germany




+49 4621 9785538
+49 1575 0663676
+49 4621 9785539
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 2.1, vCard 3.0, vCard 4.0

Service Infos

CMS Info

Product Name:
UDOs Webserver
Version:
0.5.1.214
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Sat, 26. Oct 2024 05:52:49

Development Info

Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64

System Info

OS:
Ubuntu 22.04.5 LTS (Jammy Jellyfish)

Hardware Info

Model:
Hewlett-Packard HP Pavilion dm4 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s),  MHz