jQuery

【jQuery】ニュースティッカー無限スクロールプラグインjQuery.tickerNews

September 14, 2016
jQuery.tickerNews

jQuery.tickerNewsはニュースティッカー無限スクロールjQueryプラグイン。

jQueyは1.8以上

$(function(){
    $(".TickerNews").newsTicker();
});

HTML

<div class="TickerNews" id="T2">
    <div class="ti_wrapper">
        <div class="ti_slide">
            <div class="ti_content">
                <div class="ti_news"><a href="#">US fisherman rescued by tanker after 66 days lost at sea</a></div>
                <div class="ti_news"><a href="#">Overseas aid must rise by £1bn in next two years, says Europe</a></div>
                <div class="ti_news"><a href="#">Muslim population looks likely to double in size </a></div>
                <div class="ti_news"><a href="#">Heathrow cuts passenger levy to boost domestic flights</a></div>
                <div class="ti_news"><a href="#">Couple plotted to sell their new baby online for €5,000 </a></div>
            </div>
        </div>
    </div>
</div>  

CSS

.TickerNews{
    width: 100%;
    height: 50px;
    line-height: 50px;
}
.ti_wrapper{
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 50px;
}
.ti_slide{
    width: 30000px;
    position: relative;
    left: 0;
    top: 0;
}
.ti_content{
    width: 8000px;
    position: relative;
    float:left;
}
.ti_news{
    float:left;
}
.ti_news a{
    display: block;
    margin-right: 10px;
}