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,74 kByte) 18.01.2022 00:30
// coding: utf-8
/*! Created by: Udo Schmal | https://www.gocher.me/ */
(function () {
  'use strict';

  function Ticker(el) {
    var ticker = el;
    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);
      }
      cnt++;
      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.setProperty('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) 01.12.2021 23:42
/* coding: utf-8 */
.ticker {
  border: 1px solid black;
  height: 18px;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}
.ticker a {
  display: inline-block;
  position: absolute;
  top: 0;
  text-decoration: none;
}

Author: , published: , last modified:

Kontakt

Udo Schmal

Udo Schmal
Softwareentwickler
Olvengraben 41
47608 Geldern
Nordrhein-Westfalen
Germany




+49 2831 9776557
+49 1575 0663676
+49 2831 1328709
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 3.0

Service Infos

CMS Info

Product Name:
UDOs Webserver
Version:
0.5.0.167
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Sat, 25. Jun 2022 14:46:24

Development Info

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

System Info

OS:
Ubuntu 20.04.1 LTS (Focal Fossa)

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), 2681.460 MHz