ニュースティッカー風のものを作ってみる

http://program.kir.jp/ticker.htm

一昔前はよく見た、ニュースティッカー風の動く文字板。
jqueryで作ってみました。

仕様は一定時間たつと、リストで書いた項目ごとにスライドしていって、終わってもまた最初から回りだすという感じです。
ソース。

<div class="base_container">
<ul class="innner_list">
<li><a href="#">てすてす</a></li>
<li>テストテストテストテストはみ出したらその分は表示されなくなります。</li>
<li><a href="#"><img src="イメージ">htmlもOKなんでこんなふうにニュースティッカー風にしたり</a></li>
<li>項目はいくらでもOKです</a></li>
</ul>
</div>

入れ子状のulです。次はcss。

<style type="text/css">
.base_container{ 
position: relative; 
overflow:hidden; 
width:600;
height:50;
}
ul.innner_list {
position: relative;
overflow:hidden; 
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}

ul.innner_list li {
float: left;
overflow:hidden; 
width:600;
height:50;
margin: 0;
padding: 0;
border: none;
}
ul.innner_list li a{
text-decoration: none;
}
ul.innner_list li img{
    border-style: none;
    vertical-align:middle;
}
ul.innner_list li a img{
    border-style: none;
    vertical-align:middle;   
}
.clearLeft { 
clear: left; 
}
</style>

ある意味、これが一番厄介かも。基本さえ押さえていればサイズや装飾などカスタマイズ出来ます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){	
    var speed = 600;//スライド時の動きの速さ
       
    var time = 4000;//切り替わるまでの時間（ミリ秒） 
    
    var basewidth = $('.innner_list li:first').width();
    
	var distance = basewidth;
 
 	var max = basewidth*$(".innner_list li").size();
     
     
     $('.innner_list li:first').clone().appendTo('.innner_list');
     
     $('.innner_list').css("width",basewidth*$(".innner_list li").size()+"px");

    setInterval(function(){
    if(distance > max - basewidth){
    $('.base_container').find('.innner_list').animate({ left : '-'+distance },{queue:false,duration:speed,easing: 'swing',complete : function (){   
    $('.base_container').find('.innner_list').animate({ left : '0px' },{queue:false,duration:0});
    
    distance = basewidth;
    }
    });

    }else{
        $('.base_container').find('.innner_list').animate({ left : '-'+distance },{queue:false,duration:speed,easing: 'swing'});
        distance = distance + basewidth;
        }
    }
    ,time);

    });
</script>

まず、jquery読み込みが必須項目です。
スライドの動きの速さと切り替わる時間さえ正しければこれで動くはずです。
classじゃなくて、idにするべきだったかな？

動きの仕組みについてはまたあとで。っていうかねむいねむい