【jQuery】ニューススクロール(liScroll (a jQuery News Ticker made easy) 1.0)

Resource: http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html

by tea4two

HTML

<script src="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/jquery.li-scroller.1.0.js"></script>
<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>

CSS

/* 大枠:jQuery*/
.tickercontainer {
    width: 350px;
    height: 30px;
    padding: 5px;
    background: #000;
    border: 1px solid #ccc;
}
/* 小枠:jQuery*/
.mask {
    width: 350px;
    height: 30px;
    overflow: hidden;
    position: relative;
}
#ticker {
    position: absolute;
}
#ticker li {
    float: left;
    padding-right: 2em;
}
#ticker li span {
    background-color: #f00;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #fff;
    line-height: 1.8em;
    height: 1.8em;
    padding: 0.2em;
}
#ticker li a {
    margin-left: 8px;
    color: #fff;
}

JavaScript

$(function(){
    $("#ticker").liScroll({travelocity: .08});
});