[JS]省スペースに大量のコンテンツをスクロール表示するスクリプト -News Scroller

少ないスペースでも、大量のコンテンツをアニメーションの自動スクロールで表示するjQueryのプラグインを紹介します。

デモのキャプチャ

jQuery Tutorial: Building a jQuery Scroller
デモページ

デモでは、リスト要素で実装されたテキストが自動スクロールで表示され、マウスのカーソルをそのエリアに重ねるとスクロールが停止します。

[ad#ad-2]

実装方法

実装のイメージです。

サイトのキャプチャ

開始時(図:左)は最初のコンテンツの上の空のスペースをセットし、終了時(図:右)には最後のコンテンツの下にも同様に空のスペースをセットし、ループするようにします。
また、このボックスにはデフォルトのスクロールバーを表示しないようにします。

HTML

スクロールで表示するコンテンツはリスト要素を使います。

<div class="newsScroller" id="newsScroll">
	<ul>
		<li>
			<a class="title" href="#">My Story 1</a>
			<span class="desc">テキスト</span>
			<a class="link" href="#">More...</a>
		</li>
		<li>
			<a class="title" href="#">My Story 2</a>
			<span class="desc">テキスト</span>
			<a class="link" href="#">More...</a>
		</li>
		...
	</ul>
</div>

CSS

スタイルシートの一番のポイントは、ボックスに「overflow-y: scroll;」を指定し、JavaScriptがオフの場合でもコンテンツがスクロールできるようにすることです。

.newsScroller {
	height: 120px; 
	width: 260px; 
	overflow-x: hidden; 
	overflow-y: scroll;
	font: 10px/15px Verdana,Arial,sans-serif;
	color: #333;
	border: 1px solid #999;
}
.newsScroller ul {
	margin: 0;
	padding: 4px;
}
.newsScroller li {
	list-style-type: none;
	margin: 0 0 16px 0;
	padding: 0;
}
.newsScroller a.title {
	display: block;
	font-weight: bold;
	text-transform:uppercase;
	text-decoration: none;
}
.newsScroller a.title, .newsScroller a.title:visited, .newsScroller a.title:hover { 
	color: #F90;
}
.newsScroller a.title:hover
{
	text-decoration: underline; 
}

JavaScript

jquery.js」を外部ファイルとし、下記のスクリプトを記述します。

$(function() 
{
    $('#newsScroll').each(function() 
    {
        var scroller = $(this);
        var list = scroller.children('ul');

        var listH = list.height();
        var scrollerH = scroller.height();
        list.css({
            marginTop: scrollerH,
            marginBottom: scrollerH
        });
        scroller.css({
            overflow: 'hidden'
        });

        var isOver = false;
        scroller.bind('mouseenter mouseleave', function(e) {
            isOver = (e.type == 'mouseenter');
        });

        var scroll = 0;
        setInterval(function() 
        {
            if (isOver) return;
            scroll++;
            var newTop = scroll % (listH + scrollerH);
            scroller.scrollTop(newTop);
        }, 30);

    });
});

スクリプトの拡張

このスクリプトは非常にシンプルなものとなっています。クロスブラウザで動作し、自動的にスクロールし、ユーザ-の操作で中止・再開します。

これを拡張するには例えば、画像や他のコンテンツを加えたり、PHPなどのサーバーサイドのスクリプトでダイナミックにコンテンツやリンクを生成したりすることができます。

[ad#ad-2]

sponsors

top of page

©2018 coliss