Result
http://jsfiddle.net/wLn3m/1/embedded/result,js,css,html
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>