少しずつ流れて、マウスを乗せるとストップするニュースティッカー

Result

jQuery

jQuery.fn.ls = function(set) {
    set = jQuery.extend({
        spe: 0.07
    }, set);
    return this.each(function() {
        //ティッカー構築
        var $s = jQuery(this);
        $s.addClass("newsticker")
        var sw = 1;
        $s.find("li").each(function(i) {
            sw += jQuery(this, i).outerWidth(true);
        });
        var $mask = $s.wrap("<div class='mask'></div>");
        var $ticker = $s.parent().wrap("<div class='ticker'></div>");
        var cw = $s.parent().parent().width();
        $s.width(sw);
        var tt = sw + cw;
        var dt = tt / set.spe;
        //要素を左にアニメーションさせる
        function sn(spazio, tempo) {
            $s.animate({
                left: '-=' + spazio
            }, tempo, "linear", function() {
                $s.css("left", cw);
                sn(tt, dt);
            });
        }
        sn(tt, dt);
        //マウスホバーでストップさせる処理
        $s.hover(function() {
            jQuery(this).stop();
        }, function() {
            var offset = jQuery(this).offset();
            var rs = offset.left + sw;
            var rt = rs / set.spe;
            sn(rs, rt);
        });
    });
};
$("ul#ticker01").ls();

css

.ticker { /*全体*/
border: 1px solid #ddd;
background: #fff; 
width: 600px; 
height: 27px; 
margin: 0; 
padding: 0;
overflow: hidden; 
    margin:25px;
}
.ticker .mask { /* 中身 */
position: relative;
left: 10px;
top: 8px;
width: 718px;
overflow: hidden;
}
ul.newsticker { /* 中身 */
position: relative;
left: 750px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;

}
ul.newsticker li {
float: left; /* 個別アイテム */
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 50px 0 0;
} 
ul.newsticker span {
margin: 0 10px 0 0;
}

html

<ul id="ticker">
    <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
    <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
    <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
</ul>

via

liScroll (a jQuery News Ticker made easy) 1.0