JavaScript Ticker

Beispiel: ohne großes Framework
Code:
ticker.htm HTML (2,61 kByte) 13.04.2021 22:05
<!DOCTYPE html >
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Ticker</title>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: " />
    <script type="text/javascript">
      /* <![CDATA[ */
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function(callback){
            window.setTimeout(callback, 1000 / 60);
          };
})();

function getElementsByClassName(searchClass, tagName, domNode) {
  if (domNode == null) domNode = document;
  if (tagName == null) tagName = '*';
  var el = new Array();
  var tags = domNode.getElementsByTagName(tagName);
  var tcl = " "+searchClass+" ";
  for(var i=0,j=0; i<tags.length; i++) {
    var test = " " + tags[i].className + " ";
    if (test.indexOf(tcl) != -1) {
      el[j++] = tags[i];
    }
  };
  return el;
}

function jsTicker() {
}
jsTicker.prototype = {
  init: function(ticker) {
    var link = ticker.firstElementChild;
    if (link) {
      var width = (link.style.width ? parseFloat(link.style.width, 10) : link.offsetWidth) + 75;
      ticker.insertBefore(link.cloneNode(true), link);
      ticker.insertBefore(link.cloneNode(true), link);
      var value = 0;
      var tick = function() {
        value--;
        if (value < -width) {
          value = 0;
          ticker.appendChild(ticker.childNodes[0]);
        };
        ticker.childNodes[0].style.setProperty('left', value+'px');
        ticker.childNodes[1].style.setProperty('left', width+value+'px');
        ticker.childNodes[2].style.setProperty('left', 2*width+value+'px');
        window.requestAnimationFrame(tick);
      };
      window.requestAnimationFrame(tick);
    }
  }
}

function init() {
  var tickerList = getElementsByClassName("ticker", "div");
  for (var i=0; i<tickerList.length; i++) {
    var ticker = new jsTicker();
    ticker.init(tickerList[i]);
  };
}
function ready(f){/complete|loaded/i.test(document.readyState)?f():setTimeout("ready("+f+")",9)}
ready(init);
/* ]]> */
    </script>
    <style>
      .ticker{border:1px solid black; width:400px; height:18px; overflow:hidden; position:relative; white-space:nowrap;}
      .ticker a{display:inline-block; position:absolute; top:0; text-decoration:none;}
    </style>
  </head>
  <body>
    <div class="ticker"><a href="/Scheffau-2014">Bilder vom Urlaub in Scheffau am Wilden Kaiser 2014</a></div>
  </body>
</html>

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

Instagram Profile
vCard 3.0

Service Infos

CMS Info Product Name:
UDOs Webserver
Version:
0.5.0.101
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Sun, 18. Jul 2021 17:42:24
Development Info Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64
System Info OS:
Ubuntu 20.04.3 LTS (Focal Fossa)
Hardware Info Model:
Hewlett-Packard HP Pavilion dv7 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2450M CPU @ 2.50GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), 1343.283 MHz