jQuery

【jQuery】シンプルなjQueryティッカープラグインjQuery Ticker

December 18, 2016
jQuery ticker plugin

【jQuery】これは使えるかも!お知らせを流すティッカープラグイン10選でご紹介したjQuery ticker plugin。jQuery ticker pluginはシンプルなjQueryティッカープラグイン。

jQuery

jQueryは1.3.2以上

HTML

<ul id="ticker1">
  <li>1 - First item - Lorem Ipsum is simply dummy text of the printing and typesetting</li>
  <li>2 - Second item - Lorem Ipsum is simply dummy text of the printing and typesetting</li>
  <li><a href="">3 - Third item - Lorem Ipsum is simply dummy text of the printing and typesetting</a></li>
  <li><a href="">4 - Fourth item - Lorem Ipsum is simply dummy text of the printing and typesetting</a></li>
</ul>

Effect fadeIn (default)

$("#ticker1").ticker();

Effect slideUp

$("#ticker2").ticker({ effect: "slideUp"});

Effect slideDown

$("#ticker3").ticker({ effect: "slideDown"});

Options

$.fn.ticker.defaults =  {
	controls: false, //show controls, to be implemented
	interval: 3000, //interval to show next item
	effect: "fadeIn", // available effects: fadeIn, slideUp, slideDown
	duration: 400 //duration of the change to the next item
};