jqueryでNewsTicker

1文字ずつアニメーションしながら表示できるjQueryプラグイン「News Ticker」
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.newsTicker1.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
newsList: "#news",
startDelay: 10, //次が開始する時間
placeHolder1: " ■" //点滅させる文字
}
$().newsTicker(options);
});
</script>
<ul id="news">
<li><a href="http://headlines.yahoo.co.jp/hl">Service of headline of circumstances report when, etc.</a></li>
<li><a href="http://news.google.co.jp/">Fresh news of the news source of 25,000 or more can</a></li>
<li><a href="http://sankei.jp.msn.com/">The MSN Sankei news is a news site that Microsoft and </a></li>
<li><a href="http://www.nikkei.co.jp/">News site of Nihon Keizai Shimbun Inc..</a></li>
</ul>
<script type="text/javascript" src="http://lab.marinate.jp/aseet/js/jquery/jquery.easing.1.3.js"></script><script type="text/javascript">// <![CDATA[
$(function(){ 	  function newsFader(){         if($("li","div#newsTicker ul").length==1) return false; 		$("li","div#newsTicker ul").each(function(i){ 		  $(this).attr("id","news-"+i); 		  if(i!=0) $(this).hide(); 	  });       var start = count = 0, 	  end = $("li","div#newsTicker ul").length-1, 	  interval = 4500, 	  fadeTimer = setInterval(function(){         $("li#news-"+(start==1 ? count==0 ? end : count-1 : count)).hide(); 		$("#news-"+(start==1 ? (++count)-1 : ++count)).fadeIn("slow"); 		  if(start==0 && count>=end){
count = 0;
start = 1;
}else if(start==1 && count>end){
count = 0;
}
},interval);
}
newsFader();
});
// ]]></script>
<div id="newsTicker">
<ul>
<li>2010.4.5<span><a href="#">この文字はダミーですこの文字はダミーですこの文字はダミーです</a></span></li>
<li>2010.4.20<span><a href="#">この文字はダミーですこの文字はダミーですこの文字はダミーですこの文字はダミーですこの文字はダミーです</a></span></li>
</ul>
</div>
リストをフェードで切り替え表示できるjQueryプラグイン
<div id="newsTicker">
<ul>
<li>2010.4.5<span><a href="#">この文字はダミーですこの文字はダミーですこの文字はダミーです</a></span></li>
<li>2010.4.20<span><a href="#">この文字はダミーですこの文字はダミーですこの文字はダミーですこの文字はダミーですこの文字はダミーです</a></span></li>
</ul>
</div>
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

13 + four =