<style>
.ticker {
    background-color: #1b1ba4;
    color: #ea3323;
    font-family: Verdana;
    font-size: 20px;
    height:60px;
    line-height:55px;
    overflow:hidden;
    position:relative;
    margin:10px 0;
}
.ticker img{
    width: 80px;
}
.tickertext {
    color: #efbdb7;
    white-space:nowrap;
    position:absolute;
    font-family: Verdana;
    font-size: 20px;
    font-style: oblique;
}
.tickertext a{
    color: #ea3323;
    margin:0 10px;
}
.tickertext a:link, a:visited {
    font-family: Verdana;
    color: #e9e4e8;
    font-size: 20px;
}
.tickertext a:visited {
    text-decoration:none;
}
</style>
 
<div class="ticker">
<div class="tickertext">
 
<!-- Eintragungen zum Lauftext - Anfang -->
 
Aktuelles:
 
<a href="/"><img title="Tukan ruft Aktuelles" src="//files.homepagemodules.de/b915068/f55286t350p6393051n29_SMeYZfiq.gif"></a>
 
Zu unserer <a href="/t431f60061-November-Challenge-Lieblingsfoto.html#msg6393975">Foto-Challenge</a> - Motto November: Dein Lieblings-Foto
 
<a href="/"><img title="Smiley mit Fotokamera" src="//files.homepagemodules.de/b915068/f55286t350p6393051n41_USegNbOQ.gif"></a>
 

Eingereicht wurden bisher...
 
<a href="/"><img title="Rosenköpfchens Einreichung Nr.1" src="//files.homepagemodules.de/b915068/f60061t431p6393975n2_kBhFmNVj.jpg"></a>
 
<a href="/"><img title="Rafikis Einreichung Nr.1" src="//files.homepagemodules.de/b915068/f60061t431p6393978n2_GuMNiwYQ.jpg"></a>
 
Das Ergebnis ab 1.12.:
 
Zum <a href="/portal.php">Bild des Monats November</a>
 
<a href="/"><img title="Pokal" src="//files.homepagemodules.de/b915068/f55286t350p6393051n39_EhzVGmxC.gif"></a>
 
<a href="/forum.php?show=last">Zu "Letzte Beiträge"</a>
 
<!-- Eintragungen zum Lauftext - Ende -->
 
</div>
</div>
 
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function () {
    function startScrolling(ticker_obj, velocity, start_from) {
        ticker_obj.bind('marquee', function (event, c) {
            var ob = $(this);
            var sw = parseInt(ob.parent().width());
            var tw = parseInt(ob.width());
            var tl = parseInt(ob.position().left);
            var v = velocity > 0 && velocity < 100 ? (100 - velocity) * 1000 : 5000;
            var dr = (v * tw / sw) + v;
            switch (start_from) {
                case 'right':
                    if (typeof c == 'undefined') {
                        ob.css({
                            left: sw
                        });
                        sw = -tw;
                    } else {
                        sw = tl - (tw + sw);
                    };
                    break;
                default:
                    if (typeof c == 'undefined') {
                        ob.css({
                            left: -tw
                        });
                    } else {
                        sw += tl + tw;
                    };
            }
            ob.animate({
                left: sw
            }, {
                duration: dr,
                easing: 'linear',
                complete: function () {
                    ob.trigger('marquee');
                },
                step: function () {
                    if (start_from == 'right') {
                        if (parseInt(ob.position().left) < -parseInt(ob.width())) {
                            ob.stop();
                            ob.trigger('marquee');
                        };
                    } else {
                        if (parseInt(ob.position().left) > parseInt(ob.parent().width())) {
                            ob.stop();
                            ob.trigger('marquee');
                        };
                    };
                }
            });
        }).trigger('marquee');
        ticker_obj.mouseover(function () {
            $(this).stop();
        });
        ticker_obj.mouseout(function () {
            $(this).trigger('marquee', ['resume']);
        });
    };
 
    /* Cursor Ticker */
    $('.ticker').css("cursor", "pointer");
 
    /* Settings to Function */
    var ticker = $('.tickertext'); /* Element to scroll */
    var scrolling_velocity = 50; /* 1-99 */
    var scrolling_from = 'right'; /* 'right' or 'left' */
 
    startScrolling(ticker, scrolling_velocity, scrolling_from);
});
</script>
 
 

<style>
div.ticker {
    background-color: #B40404;
    color: #ffffff;
    font-family: Verdana;
    font-size: 14px;
    height:60px;
    line-height:55px;
    overflow:hidden;
    position:relative;
    margin:10px 0;
    img {	width: 50px; }
 
    .tickertext {
        color: #ffffff;
        white-space:nowrap;
        position:absolute;
        font-family: Verdana;
        font-size: 14px;
        font-style: oblique;
 
        a, a:link, a:visited {
        	color: #ffffff;
        	margin:0 10px;
        	font-family: Verdana;
        	font-size: 14px;
        }
 
        a:visited { text-decoration:none;}
    }
}
</style>