jdNewsScroll for jQuery

リストをスクロール表示

var divID = '#news';
$.ajax ({
    url      : 'hatena-jquery.xml',
    dataType : 'xml',
    type     : 'GET',
    timeout  : 8000,
    success  : function (xml) {
        $(xml).find('item').each(function () {
            var $item = $(this);
            var title = $('title', $item).text();
            var link  = $('link', $item).text();
            $(divID + ' ul').append($('<li></li>').html(
                $('<a></a>').attr({'href':link}).text(title)
            )); 
        });
    }
    , error : function() { $(divID).html('error!'); }
});
$(function() {
     $(divID).jdNewsScroll({ delay : 60, step : 2 });
});
//delay : Delay in seconds is (delay * 85)/1000
//step  : Number of pixels to step

<div class="jd_news_scroll" id="news">
 <ul>
      <li><a href="#">aaa</a> xxxx </li>
      <li><a href="#">bbb</a> yyyy </li>
      ..
 </ul>
</div>

div.jd_news_scroll {
    position:relative; overflow:hidden; height:3em;
    border:1px solid #ccc;
    margin:1em 4em;
}
div.jd_news_scroll ul {
    position:relative;
    padding:0 1em;
    margin:0;
}
div.jd_news_scroll ul li {
    height:1.5em; line-height:1.4em; 
    margin:0; padding:0; white-space:nowrap;
    border-bottom:1px dotted #eee;
}