NO.128 ウィンドウ応用⑧

スクロール

インラインフレームで例を示します。カーソルがボタンの上に乗っている間、矢印の方向へスクロールするScriptです。
一応タイマーで制御する事にしました。

実行例

ソース

<form name=mad onSubmit="return false">
<input type=text name=t1 size=3 onFocus=blur(); readonly=true><input type=text name=t2 size=3 onFocus=blur(); readonly=true>
<table><tr><td><input type=button value="＼"onMouseout=stop() onMouseover=js1f()></td><td><input type=button value="↑"onMouseout=stop() onMouseover=js1a()></td><td><input type=button value="／"onMouseout=stop() onMouseover=js1g()></td></tr>
<tr><td><input type=button value="←"onMouseout=stop() onMouseover=js1b()></td><td><input type=button value="●"onMouseover=js1e()></td><td><input type=button value="→"onMouseout=stop() onMouseover=js1c()></td></tr>
<tr><td><input type=button value="／"onMouseout=stop() onMouseover=js1h()></td><td><input type=button value="↓"onMouseout=stop() onMouseover=js1d()></td><td><input type=button value="＼"onMouseout=stop() onMouseover=js1i()></td></tr>
</table>
<iframe src=index.html name=f1 width=300 height=300></iframe>
</form>
<script type=text/javascript>
<!--
function sa(){document.mad.t1.value=f1.document.body.scrollLeft;document.mad.t2.value=f1.document.body.scrollTop;}
function sb(){clearInterval(EE);}
function stop(){clearInterval(DD);}
function begin(sc1,sc2){f1.scrollBy(sc1,sc2);}
function js1a(){DD=setInterval('begin(0,-10)',1);}
function js1b(){DD=setInterval('begin(-10,0)',1);}
function js1c(){DD=setInterval('begin(10,0)',1);}
function js1d(){DD=setInterval('begin(0,10)',1);}
function js1e(){f1.scrollTo(10000,10000);f1.scrollTo(f1.document.body.scrollLeft/2,f1.document.body.scrollTop/2)}
function js1f(){DD=setInterval('begin(-10,-10)',1);}
function js1g(){DD=setInterval('begin(10,-10)',1);}
function js1h(){DD=setInterval('begin(-10,10)',1);}
function js1i(){DD=setInterval('begin(10,10)',1);}
EE=setInterval('sa()',1);
window.onunload=sb;
-->
</script>

※document.body.scrollLeft⇒X方向でどの位置までスクロールしたか参照/設定、document.body.scrollTop⇒Y方向でどの位置までスクロールしたか参照/設定
変数名=setInterval("実行する関数",㍉秒)⇒指定された時間ごとに関数を実行、clearInterval(変数名)⇒setIntervalの設定を解除

実行

トップに戻る前に戻る　次に進む

SEO		[PR] 爆速!無料ブログ無料ホームページ開設無料ライブ放送