【jQuery】ニュースティッカー無限スクロールプラグイン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;
}
 
jQuery.tickerNews

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

  • LATEST
  • RELATED
  • POPULAR