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

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

1．CSSの記述例

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
	text-align:left;
}

.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の記述例

<script type="text/javascript" src="https://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="https://dad-union.com/javascript/158">表示画像をjQueryを使用して点滅させる方法</a></li>


 	<li><a href="https://dad-union.com/javascript/155">jQueryとsetIntervalで複数のpng画像一定間隔で切替える方法</a></li>


 	<li><a href="https://dad-union.com/javascript/153">jquery.tablesorter：テーブルタグをソート可能にするJs</a></li>


 	<li><a href="https://dad-union.com/javascript/148">snowfall.jquery：紙吹雪を表示するJs</a></li>


 	<li><a href="https://dad-union.com/javascript/146">jquery.countdown.js：設定日からのカウントダウンを表示</a></li>


 	<li><a href="https://dad-union.com/javascript/158">表示画像をjQueryを使用して点滅させる方法</a></li>


 	<li><a href="https://dad-union.com/javascript/155">jQueryとsetIntervalで複数のpng画像一定間隔で切替える方法</a></li>


 	<li><a href="https://dad-union.com/javascript/153">jquery.tablesorter：テーブルタグをソート可能にするJs</a></li>


 	<li><a href="https://dad-union.com/javascript/148">snowfall.jquery：紙吹雪を表示するJs</a></li>


 	<li><a href="https://dad-union.com/javascript/146">jquery.countdown.js：設定日からのカウントダウンを表示</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

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