jquery ticker.js ニュースティッカーを作る
2013年8月31日更新 view: 7 view
ニュースティッカーってどうやって作るの?
ニュースティッカーって?
ニュースティッカーとは、よくある文字列が出たり、消えたりする効果です。javascript、今回はjqueryでの作り方を書きます。
js
以下を jquery.ticker.js として保存。
そして使いたいHTMLで読み込みます。
function shuffleContent(container) {
var content = container.find("> *");
var total = content.size();
content.each(function() {
content.eq(Math.floor(Math.random()*total)).prependTo(container);
});
}
$(function(){
$(window).load(function(){
shuffleContent($(".ticker > ul"));
//alert($(".ticker > ul").html());
var $setElm = $('.ticker');
var effectSpeed = 1000;
var switchDelay = 6000;
var easing = 'swing';
$setElm.each(function(){
var effectFilter = $(this).attr('rel'); // 'fade' or 'roll' or 'slide'
var $targetObj = $(this);
var $targetUl = $targetObj.children('ul');
var $targetLi = $targetObj.find('li');
var $setList = $targetObj.find('li:first');
var ulWidth = $targetUl.width();
var listHeight = $targetLi.height();
$targetObj.css({height:(listHeight)});
$targetLi.css({top:'0',left:'0',position:'absolute'});
if(effectFilter == 'fade') {
$setList.css({display:'block',opacity:'0',zIndex:'98'}).stop().animate({opacity:'1'},effectSpeed,easing).addClass('showlist');
setInterval(function(){
var $activeShow = $targetObj.find('.showlist');
$activeShow.animate({opacity:'0'},effectSpeed,easing,function(){
$(this).next().css({display:'block',opacity:'0',zIndex:'99'}).animate({opacity:'1'},effectSpeed,easing).addClass('showlist').end().appendTo($targetUl).css({display:'none',zIndex:'98'}).removeClass('showlist');
});
},switchDelay);
} else if(effectFilter == 'roll') {
$setList.css({top:'3em',display:'block',opacity:'0',zIndex:'98'}).stop().animate({top:'0',opacity:'1'},effectSpeed,easing).addClass('showlist');
setInterval(function(){
var $activeShow = $targetObj.find('.showlist');
$activeShow.animate({top:'-3em',opacity:'0'},effectSpeed,easing).next().css({top:'3em',display:'block',opacity:'0',zIndex:'99'}).animate({top:'0',opacity:'1'},effectSpeed,easing).addClass('showlist').end().appendTo($targetUl).css({zIndex:'98'}).removeClass('showlist');
},switchDelay);
} else if(effectFilter == 'slide') {
$setList.css({left:(ulWidth),display:'block',opacity:'0',zIndex:'98'}).stop().animate({left:'0',opacity:'1'},effectSpeed,easing).addClass('showlist');
setInterval(function(){
var $activeShow = $targetObj.find('.showlist');
$activeShow.animate({left:(-(ulWidth)),opacity:'0'},effectSpeed,easing).next().css({left:(ulWidth),display:'block',opacity:'0',zIndex:'99'}).animate({left:'0',opacity:'1'},effectSpeed,easing).addClass('showlist').end().appendTo($targetUl).css({zIndex:'98'}).removeClass('showlist');
},switchDelay);
}
});
});
});
htmlとcss
<style>
.ticker {
position: relative;
overflow: hidden;
}
.ticker ul {
margin:0;
padding:0;
width: 100%;
position: relative;
}
.ticker ul li {
width: 100%;
display: none;
}
</style>
<div class="ticker" rel="fade">
<ul>
<li>hogera</li>
<li>loveyou</li>
</ul>
</div>
スポンサードリンク
スポンサードリンク
関連記事
関連カテゴリ
松下 由美
こんにちわ。松下由美です。 記事を頑張って書いていきますね。
ピックアップ
-
LINEで異性と出会う3つのコツ
view: 85 view
パソコン・ソフトウェア ランキング
2月20日 ( 水 ) にアクセスが多かった記事はこちら!
-
hammer.jsの使い方
view: 705 view -
jquery で ロゴをランダムに変更
view: 8 view -
無料のタイピングソフトまとめ!
view: 2 view -
twitter bootstrap 開いているタブを記憶
view: 244 view -
TwitterBootstrapulliタグ横並べ
view: 409 view -
javascript 正規表現 画像のURL href のみ抜き出し
view: 225 view -
twitter bootstrap オンオフ、トグルボタン
view: 88 view -
cakephp2.x 画像アップロードMediaPlugin を使う
view: 58 view -
google analytics api v3 を cakephp2.x で使う 1
view: 19 view -
twitter bootstrap spacer
view: 180 view