掲示板/JavaScript質問板/過去ログ/一覧/ イベントハンドラでブロック要素をスクロールさせるには

0 名前： tentenmusi ： 2006/10/12（木） 02:21 ID:tTtXoGor: <div style="overflow: hidden;height:20px;width:200px;white-space:nowrap;">てすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすと</div>

<span onmouseover="rightscroll();">→</span><br>
<span onmouseover="leftscroll();">←</span>

rightscroll()で右にスクロールさせ、
leftscroll()で左にスクロールさせようと思っています。

よろしくおねがいします。

1 名前： Chip ： 2006/10/12（木） 02:21 ID:iXTrKUp6

スクロールの詳細がわからないので簡単なサンプルを。

タイマーを使ってゆっくりとか、マウスを離したら止めるとか色々加えていけば実用的になると思います。

<html>
<head>
<title></title>
<script type="text/javascript">
function hr_sc(Vec){
	var O = document.getElementById('a0');
	O.scrollLeft = (Vec>0)?O.scrollWidth:0;
}
</script>
</head>
<body>
<div id="a0" style="overflow: hidden;height:20px;width:200px;white-space:nowrap;">LEFTてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとRIGHT</div>
<p>
<span onmouseover="hr_sc(1);">→</span>
<span onmouseover="hr_sc(-1);">←</span>
</p>
</body>
</html>

2 名前： tentenmusi ： 2006/10/12（木） 02:21 ID:nSEBVHdl: 回答ありがとうございます。
タイマーとはsetTimeoutのことですか？
setTimeoutでいろいろやってみたのですが
難しいです。
どういう感じなのか大まかに説明してもらえると助かります。

3 名前： Chip ： 2006/10/12（木） 02:21 ID:iXTrKUp6: ちょっと(数ピクセル～数十ピクセル)スクロールさせる関数を用意し、それをタイマーで呼び出し続けるという感じで・・おおまかな説明って難しい。
「javascript settimeout スクロール」ってキーワードで検索すると色々みつかりますので実例を見てみてください。
機能的にはマーキー(<marquee>)にそっくりなので javascript marquee で探してもいいかも。

4 名前： tentenmusi ： 2006/10/12（木） 02:21 ID:nSEBVHdl

<html>
<head>
<title></title>
<script type="text/javascript">
	var i = 0;
	function hr_sc(x){
	if(x==0)	i=i;
	else	i=-i;
	var O = document.getElementById('a0');
	O.scrollLeft = i;
	i++;
}
function func(x) {
    hr_sc(x);
    setTimeout("func("+x+")", 10);
}
</script>

</head>

<body>
<div id="a0" style="overflow: hidden;height:20px;width:200px;white-space:nowrap;">LEFTてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとRIGHT</div>
<p>
<span onmouseover="func(0);">→</span>
<span onmouseover="func(1);">←</span>
</p>
</body>
</html>

ここまでやれました。
でも、→に行ったら←に帰れません（残像みたいになってしまいます。）
あとはどうかお願いします。

5 名前： tentenmusi ： 2006/10/12（木） 02:21 ID:nSEBVHdl

と言いつつも完成してしまいました。

<html>
<head>
<title></title>
<script type="text/javascript">
	var i = 0;
	var isscrolling = false;
	
	function hr_sc(x){
		var O = document.getElementById('a0');
		O.scrollLeft = i;
		if(x==0)	i++;
		else	i--;
	}
	
function func(x) {
    hr_sc(x);
    Timer_id = setTimeout("func("+x+")", 1);
}

</script>

</head>

<body>
<div id="a0" style="overflow: hidden;height:20px;width:200px;white-space:nowrap;">LEFTてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとRIGHT</div>
<p>
<span onmouseover="func(0);" onmouseout="clearTimeout(Timer_id);" style="cursor: pointer;">→</span>
<span onmouseover="func(1);" onmouseout="clearTimeout(Timer_id);" style="cursor: pointer;">←</span>
</p>
</body>
</html>

setTimeoutのミリ秒のところである数値以下になると反応しないのが
今のところ問題ですけど。
どうも、有難うございました。