jQueryを使い、ボッス要素を自動スクロールし、テキストが流れているように見せる方法。
jQueryを使わないで作る方法については、「JavaScriptでボッス要素を自動スクロールする方法」のページへ。
実装例
この
ボックス
要素
を
自動的
に
最後
まで
スクロール
します。
実装例（サンプル）の動作について
ページを読み込むと、背景色が黄色のボックス要素を、自動的に最後まで縦スクロールする。最後までスクロールし終わると、最初に戻り、自動スクロールを繰り返す。
ソースコード
JavaScript
<script type="text/javascript">
jQuery( function() {
autoScroll();
} );
var $scrollY = 0;
function autoScroll() {
var $sampleBox = jQuery( '#sampleBox' );
$sampleBox.scrollTop( ++$scrollY );
if( $scrollY < $sampleBox[0].scrollHeight - $sampleBox[0].clientHeight ){
setTimeout( "autoScroll()", 20 );
}else{
$scrollY = 0;
$sampleBox.scrollTop( 0 );
setTimeout( "autoScroll()", 20 );
}
}
</script>
jQuery( function() {
autoScroll();
} );
var $scrollY = 0;
function autoScroll() {
var $sampleBox = jQuery( '#sampleBox' );
$sampleBox.scrollTop( ++$scrollY );
if( $scrollY < $sampleBox[0].scrollHeight - $sampleBox[0].clientHeight ){
setTimeout( "autoScroll()", 20 );
}else{
$scrollY = 0;
$sampleBox.scrollTop( 0 );
setTimeout( "autoScroll()", 20 );
}
}
</script>
HTML
<div id="sampleBox">
<p id="sampleText">
<br />この<br />ボックス<br />要素<br />を<br />自動的<br />に<br />最後<br />まで<br />スクロール<br />します。
</p>
</div>
<p id="sampleText">
<br />この<br />ボックス<br />要素<br />を<br />自動的<br />に<br />最後<br />まで<br />スクロール<br />します。
</p>
</div>
CSS
<style>
#sampleBox {
width: 300px;
height: 300px;
overflow: hidden;
background-color: yellow;
text-align: center;
line-height: 1.5em;
font-size: 16px;
border: 1px solid gray;
border-radius: 10px;
}
#sampleText {
margin: 300px 0;
}
</style>
#sampleBox {
width: 300px;
height: 300px;
overflow: hidden;
background-color: yellow;
text-align: center;
line-height: 1.5em;
font-size: 16px;
border: 1px solid gray;
border-radius: 10px;
}
#sampleText {
margin: 300px 0;
}
</style>