jQuery: ニュースティッカー（5種類）の作り方

jQueryでニュースティッカー（5種類）を作ります。
今回作ったのは次の５つです。

  • フェードイン・フェードアウト
  • 左から右
  • 上から下
  • 下から上
  • 斜め移動

動作サンプル、サンプルコード、コード解説の順番で記述しています。

動作サンプル

サンプルを別ページで開く

HTML


<ul id="ul_news">
    <li><a href="#">これは１つめのテキストです。</a></li>
    <li><a href="#">これは２つめのテキストです。</a></li>
    <li><a href="#">これは３つめのテキストです。</a></li>
    <li><a href="#">これは４つめのテキストです。</a></li>
</ul>

<div class="title">フェードイン・フェードアウト</div>
<div id="div_ticker1" class="tick"></div>

<div class="title">右から左</div>
<div id="div_ticker2" class="tick"></div>

<div class="title">上から下</div>
<div id="div_ticker3" class="tick"></div>

<div class="title">下から上</div>
<div id="div_ticker4" class="tick"></div>

<div class="title">斜め</div>
<div id="div_ticker5" class="tick"></div>

CSS


div.title {
    margin: 15px 0px 3px 5px
}

#ul_news {
    display: none;
}
div.tick {
    width: 300px;
    height: 30px;
    line-height: 30px;
    text-align: left;
    border: solid 1px silver;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

div.tick a {
    position: absolute;
    margin-left: 10px;
    font-size: 1.0em;
    color: gray;
}

JavaScript


var timer;

// newstickerの設定用オブジェクト
ticker = {};
ticker.totalList = 0;   // li要素の数(リスト数)
ticker.numList = 0;     // 現在のリスト番号
ticker.time = 1000;     // アニメーションの秒数
ticker.interval = 4000; // setInterval()の間隔

// load
$(window).on('load',function(){

    ticker.totalList = $('#ul_news li').length;  // リスト数
    
    ticker.width = $('.tick').css('width');    // 横幅
    ticker.height = $('.tick').css('height');  // 長さ
    
    var str = $('#ul_news li:first').html();   // a要素

    $('#div_ticker1').html(str);
    $('#div_ticker2').html(str);
    $('#div_ticker3').html(str);
    $('#div_ticker4').html(str);
    $('#div_ticker5').html(str);
    
    timer = setInterval('showNews()', ticker.interval);
    
});
    
function showNews(){
    
    // リストの順番を決める
    ticker.numList ++;
    if (ticker.numList > ticker.totalList - 1){
        ticker.numList = 0;
    }

    var str = $('#ul_news li').eq(ticker.numList).html(); // a要素を取得

    // フェードアウト・フェードイン -------------
    $('#div_ticker1 a').animate({opacity: '0'}, ticker.time, 'linear', function(){
        $('#div_ticker1').html(str);
        $('#div_ticker1 a').css('opacity', '0').animate({opacity: '1.0'}, ticker.time, 'linear' );
    });
    
    // 右から左  -----------------------------
    $('#div_ticker2 a').animate({left: '-' + ticker.width}, ticker.time, 'linear', function(){
        $('#div_ticker2').html(str);
        $('#div_ticker2 a').css('left', ticker.width).animate({left: '0'}, ticker.time, 'linear');
    });
    
    // 上から下  ------------------------------
    $('#div_ticker3 a').animate({top: ticker.height}, ticker.time, 'linear', function(){
        $('#div_ticker3').html(str);
        $('#div_ticker3 a').css('top', '-' + ticker.height).animate({top: '0'}, ticker.time, 'linear');
    });
    
    // 下から上  ------------------------------
    $('#div_ticker4 a').animate({top: '-' + ticker.height}, ticker.time, 'linear', function(){
        $('#div_ticker4').html(str);
        $('#div_ticker4 a').css('top', ticker.height).animate({top: '0'}, ticker.time, 'linear');
    });
    
    // 斜め: 左上から左下  ----------------------
    $('#div_ticker5 a').animate({top: ticker.height, left: '-' + ticker.width}, ticker.time, 'linear', function(){
        $('#div_ticker5').html(str);
        $('#div_ticker5 a').css({top: '-' + ticker.height, left: ticker.width, width: ticker.width})
            .animate({top: '0', left: '0'}, ticker.time, 'linear');
    });
}

コード解説

リストでテキスト情報を管理


<ul id="ul_news">
    <li><a href="#">これは１つめのテキストです。</a></li>
    <li><a href="#">これは２つめのテキストです。</a></li>
    <li><a href="#">これは３つめのテキストです。</a></li>
    <li><a href="#">これは４つめのテキストです。</a></li>
</ul>

リストでテキスト情報を管理しています。プログラム側でリストのインデックス番号を利用して表示する情報を取得します。 このリストは表示しないため、css側でdisplay: noneとしています。

positionプロパティ


div.tick {
    width: 300px;
    height: 30px;
    line-height: 30px;
    text-align: left;
    border: solid 1px silver;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

div.tick a {
    position: absolute;
    margin-left: 10px;
    font-size: 1.0em;
    color: gray;
}

CSSの設定でポイントとなるのがpositionプロパティです。 文字を移動させるために、 表示枠の「div.tick」ではposition: relative、 文字の「div.tick a」ではposition: absoluteにします。

ニュースティッカーの設定用オブジェクト


// newstickerの設定用オブジェクト
ticker = {};
ticker.totalList = 0;   // li要素の数(リスト数)
ticker.numList = 0;     // 現在のリスト番号
ticker.time = 1000;     // アニメーションの秒数
ticker.interval = 4000; // setInterval()の間隔

最初にニュースティッカーの設定オブジェクトを作成しています。 表示の秒数を変更したい場合は「ticker.time」や「ticker.interval」を変更してください。

「ticker.time」はjQueryのamimate()メソッドの秒数、 「ticker.interval」はjavascriptのsetInterval()メソッドの秒数です。

移動させるロジック


// 右から左  -----------------------------
$('#div_ticker2 a').animate({left: '-' + ticker.width}, ticker.time, 'linear', function(){
    $('#div_ticker2').html(str);
    $('#div_ticker2 a').css('left', ticker.width).animate({left: '0'}, ticker.time, 'linear');
});

移動させるロジックは、パターンが同じなので１つだけ紹介します。
処理の流れは３つです。まず、現在表示されているa要素をanimate()メソッドで枠の外に移動させます。 次にdiv要素の内容を新しいa要素に書き換えます。 最後にa要素を枠外から枠内に移動させます。全部このパターンです。

フェードイン・フェードアウトも考え方は同じです。 移動するか、フェードイン・フェードアウトするかの違いだけで、パターンは一緒です。

jQuery入門