ニュースティッカーをjQueryで実装する／フルスクラッチ編

jQuery2013年2月18日

前回の記事、前々回の記事では、何かしらのプラグインを使ってニュースティッカーを実装しました。
ですが、せっかくなので今回自分でプラグインを作成いたしました。機能としてはかなりシンプルなものとなりますが、使いやすく作成したつもりです。一応Firefox最新版、Safari最新版、IE6以上で検証済みです。

jQuery本体に加え、イージングのプラグイン「jQuery easing」が必要となります。
まずは下記のURLより必要なファイルをダウンロードし、読み込みを行ってください。

実装内容

垂直ロール、水平スライド、フェードインを選択可
イージングのスピード、待機時間を設定可
イージングのタイプを選択可
ループ機能あり

HTML

<div class="list-slider-01-container" rel="roll">
<ul class="list-slider-01">
<li>【ニュース1】ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ</li>
<li>【ニュース2】ふがふがふがふがふがふがふがふがふがふがふがふがふがふが</li>
<li>【ニュース3】もげもげもげもげもげもげもげもげもげもげもげもげもげもげ</li>
<li>【ニュース4】ほがほがほがほがほがほがほがほがほがほがほがほがほがほが</li>
<li>【ニュース5】もがもがもがもがもがもがもがもがもがもがもがもがもがもが</li>
</ul>
</div>

CSS

div.list-slider-01-container{
width:600px;
border:1px solid #ccc;
position:relative;
overflow:hidden;
}

div.list-slider-01-container ul.list-info{
width:100%;
position:relative;

}

div.list-slider-01-container ul.list-slider-01 li{
width:100%;
display:none;
}

js

$(function(){
$(window).load(function(){

/*パラメータ設定*/
var $tgt = $('.list-slider-01-container');
var $easing = 'easeOutQuad';
var $speed = 800;
var $delay = 4000;


$tgt.each(function(){

/*変数定義*/
var $effectType = $(this).attr('rel');
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($effectType == 'roll') {
$setList.css({top:'3em',display:'block',opacity:'0'}).stop().animate({top:'0',opacity:'1',zIndex:'98'},$speed,$easing).addClass('visible');
setInterval(function(){
var $activeShow = $targetObj.find('.visible');
$activeShow.animate({top:'-3em',opacity:'0'},$speed,$easing).next().css({top:'3em',display:'block',opacity:'0',zIndex:'99'}).animate({top:'0',opacity:'1'},$speed,$easing).addClass('visible').end().appendTo($targetUl).css({zIndex:'98'}).removeClass('visible');
},$delay);
}

/*水平スライド*/
else if($effectType == 'slide') {
$setList.css({left:($ulWidth),display:'block',opacity:'0'}).stop().animate({left:'0',opacity:'1',zIndex:'98'},$speed,$easing).addClass('visible');
setInterval(function(){
var $activeShow = $targetObj.find('.visible');
$activeShow.animate({left:(-($ulWidth)),opacity:'0'},$speed,$easing).next().css({left:($ulWidth),display:'block',opacity:'0',zIndex:'99'}).animate({left:'0',opacity:'1'},$speed,$easing).addClass('visible').end().appendTo($targetUl).css({zIndex:'98'}).removeClass('visible');
},$delay);
}

/*フェードイン*/
else if($effectType == 'fade') {
$setList.css({display:'block',opacity:'0'}).stop().animate({opacity:'1',zIndex:'98'},$speed,$easing).addClass('visible');
setInterval(function(){
var $activeShow = $targetObj.find('.visible');
$activeShow.animate({opacity:'0'},$speed,$easing,function(){
$(this).next().css({display:'block',opacity:'0',zIndex:'99'}).animate({opacity:'1'},$speed,$easing).addClass('visible').end().appendTo($targetUl).css({display:'none',zIndex:'98'}).removeClass('visible');
});
},$delay);
}
});
});
});

解説

js内の「パラメータ設定」というコメントの箇所で、機能を実行するidもしくはclassを設定します。
あとはイージングのタイプ、スピード、待機時間をそれぞれ設定します。

垂直ロール、水平スライド、フェードインの選択はHTML内で行います。サンプルでは<div rel="roll">としていますが、「roll」「slide」「fade」でそれぞれエフェクトが切り替わる仕様となっています。

この記事を読んでいる方にオススメの記事

「jQuery」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。