sagscroller:文字や画像を自動で縦スクロールするJs
- 2019.05.19
- JavaScript jQuery
- 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
ページスペース如何にして有効活用させるかですかね。
-
前の記事
delay:複数のサムネイルを順番にフェードイン表示するjQuery 2019.05.18
-
次の記事
turn.js:メージめくりを導入できるJs 2019.05.20