sagscroller:文字や画像を自動で縦スクロールするJs



リストタグに設定した文字リンクや画像を自動で縦スクロールしてみます。

1.CSSの記述例

<style type="text/css">
<!--
.sagscroller{
	width: 310px;
	height:300px;
	overflow:hidden;
	position:relative;
	border:5px solid black;
}
.sagscroller ul{
	position:absolute;
	margin:0;
	padding:0;
	background:white;
	list-style:none;
	width: 300px;
}
.sagscroller ul li{
	display:block;
}
.sagscroller ul li .rsslabel{
	margin-top:5px;
	font-size:12px;
	clear: both;
}
/* 文字リスト縦スクロールデモ */
div#mysagscroller{
	width: 310px;
	height:310px;
	float:left;
}
div#mysagscroller ul li{
	color:000000;
	padding:5px;
	margin-bottom:5px;
}
div#mysagscroller ul li:first-letter{
	font-size:24px;
	background:#666666;
	color:#ffffff;
	padding:0 2px;
	margin-right:2px;
}
/* 画像縦スクロールデモ */
div#mysagscroller2{
	width: 300px;
	height:600px;
	border:5px solid #C0C0C0;
	float:right;
}
div#mysagscroller2 ul li img{
	border-width:0;
	display:block;
}
-->
</style>

2.JavaScriptの記述例

文字と画像、2種類の縦スクロールデモを設定してます。
スピードや自動スクロール等の調整が可能です。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="sagscroller.js"></script>
<script type="text/javascript">
/* 文字リスト縦スクロールデモ */
var sagscroller1=new sagscroller({
	id:'mysagscroller',
	mode: 'manual'
})
/* 画像縦スクロールデモ */
var sagscroller2=new sagscroller({
	id:'mysagscroller2',
	mode: 'auto',
	pause: 2500,
	animatespeed: 400
})
</script>

3.HTMLの記述例

<div id="mysagscroller" class="sagscroller">
	<ul>
    <li><a href="/category/css" title="CSS に含まれる投稿をすべて表示" target="_blank">CSSに関するお知らせ</a></li>
    <li><a href="/category/facebook" title="Facebook に含まれる投稿をすべて表示" target="_blank">Facebookに関するお知らせ</a></li>
    <li><a href="/category/html5" title="HTML5 に含まれる投稿をすべて表示" target="_blank">HTML5に関するお知らせ</a></li>
    <li><a href="/category/javascript" title="JavaScript に含まれる投稿をすべて表示" target="_blank">JavaScriptに関するお知らせ</a></li>
    <li><a href="/category/php" title="PHP に含まれる投稿をすべて表示" target="_blank">PHPに関するお知らせ</a></li>
    <li><a href="/category/seo" title="SEO に含まれる投稿をすべて表示" target="_blank">SEOに関するお知らせ</a></li>
    <li><a href="/category/wordpress" title="WordPress に含まれる投稿をすべて表示" target="_blank">WordPressに関するお知らせ</a></li>
    <li><a href="/category/sonohoka" title="その他 に含まれる投稿をすべて表示" target="_blank">その他に関するお知らせ</a></li>
    <li><a href="/category/smartphone" title="スマートフォン に含まれる投稿をすべて表示" target="_blank">スマートフォンに関するお知らせ</a></li>
	</ul>
</div>


<div id="mysagscroller2" class="sagscroller">
	<ul>
	<li><img src="i1.jpg" alt="1" /></li>
	<li><img src="i2.jpg" alt="2" /></li>
	<li><img src="i3.jpg" alt="3" /></li>
	<li><img src="i4.jpg" alt="4" /></li>
	<li><img src="i5.jpg" alt="5" /></li>
	<li><img src="i6.jpg" alt="6" /></li>
	<li><img src="i7.jpg" alt="7" /></li>
	<li><img src="i8.jpg" alt="8" /></li>
	<li><img src="i9.jpg" alt="9" /></li>
	<li><img src="i10.jpg" alt="10" /></li>
	</ul>
</div>

sagscroller:文字や画像を自動で縦スクロールするデモページ

ソース元:Dynamic Drive DHTML Scripts- SAG Content Scroller

ページスペース如何にして有効活用させるかの
Jsの一つですかね。