マーキーのスクロールの制御

　HOME 　>>> 　HTML整理ノート　>>> DHTML --　基本編　　応用編

Marquee万歳!!

■次のオプションを選択してボタンを押して下さい。上のマーキーのスクロールを制御できます。

▼スクロール方法(behavior属性)：　
▼スクロール方向(direction属性)：
▼スクロール回数(loop属性)：

■以下のボタンでスピードを調整できます。

▼スクロールの再描画間隔(scrolldelay属性)を／
現在のscrolldelay値は「」ミリ秒
▼スクロールの移動ピクセル数(scrollamount属性)を／
現在のscrollamount値は「」ピクセル

behavior属性

マーキーのスクロール方法を設定
behavior="scroll" ･･･(デフォルト)ページを横切るスクロールを繰り返し、コンテンツの末尾まで消えていく。ループ回数を終えると消える。
behavior="slide" ･･･動作は"scroll"と同じだが、コンテンツの先頭が端に達したら消える。ループ回数を終えると、端で停止する。
behavior="alternate" ･･･左右 or 上下に往復する。ループ回数を終えると、端で停止する。
Scriptは MarqueeのID名.behavior = "設定値";

direction属性

マーキーのスクロール方向を設定。
"left"は右から左へ(デフォルト)。"right"は左から右へ。”up”は下から上へ。"down"は上から下へ。
Scriptは MarqueeのID名.direction = "設定値";

loop属性

スクロール回数を整数値で指定。
-1 又は"infinite"を指定すると無限ループする(デフォルト)
behavior="scroll"の場合，指定回数後，エリアから消える。
behavior="slide"の場合，指定回数後，端で停止する。
behavior="alternate"の場合，1往復が2回分になり，指定回数後，停止する。
Scriptは MarqueeのID名.loop = 整数値(又は"infinite");

scrolldelay属性

スクロールの再描画間隔をミリ秒(1/1000秒)で指定。デフォルトは85
Scriptは MarqueeのID名.scrollDelay = 整数値;

scrollamount属性

コンテンツが再描画1回分で進むピクセル数（スクロール速度の調整、デフォルトは6)
Scriptは MarqueeのID名.scrollAmount = 整数値;

Sample Source......................................................................>>>

<script language="JavaScript"><!--
 function ChangeMarqu(){
   MARQ.behavior = form1.beha.value;  //ｽｸﾛｰﾙ方法
  
 MARQ.direction = form1.dire.value;  //ｽｸﾛｰﾙ方向
   MARQ.loop = parseInt(form1.loop.value);  //ﾙｰﾌﾟ回数
 }

 var de = 85;    //scrolldelay(再描画間隔)の初期値
 function ChangeDelay(d){
   de += d;
   MARQ.scrollDelay = de;

  de_value.innerText = de;  //現在の設定値を表示
   //設定値が35以下、300以上になったらﾎﾞﾀﾝを無効にする。
   if(de <35)form1.delay2.disabled = 1;

   else form1.delay2.disabled = 0;
   if(de >300)form1.delay1.disabled = 1;
   else form1.delay1.disabled = 0;
 }
 var am = 6;    //scrolldelayの初期値

 function ChangeAmount(a){
   am += a;
   MARQ.scrollAmount = am;
   am_value.innerText = am;  //現在の設定値を表示

   //設定値が3以下、20以上になったらﾎﾞﾀﾝを無効にする。
   if(am <3)form1.amount1.disabled = 1;
   else form1.amount1.disabled = 0;

   if(am >20)form1.amount2.disabled = 1;
   else form1.amount2.disabled = 0;
	}
//--></script>
</head>
  
<body>
<marquee id="MARQ" bgcolor="#b0c4de" width="300" height="100">Marquee万歳!!</marquee>
<form name="form1">
 <p>■次のオプションを選択して
  <input type="button" name="start" value="Start" onclick="ChangeMarqu(this.form)">
  ボタンを押して下さい。上のマーキーのスクロールを制御できます。</p>
  ▼スクロール方法(behavior属性)： 
  <select name="beha">
   <option value="scroll" selected>末尾までスクロール(scroll)</option>
   <option value="slide">先頭までスクロール(slide)</option>
   <option value="alternate">往復(alternate)</option>
  </select><br>
  ▼スクロール方向(direction属性)： 
  <select name="dire">
   <option value="left" selected>右から左へ</option>
   <option value="right">左から右へ</option>
   <option value="up">上へ</option>
   <option value="down">下へ</option>
  </select><br>
  ▼スクロール回数(loop属性)：
  <select name="loop">
   <option value="1">１ 回</option>
   <option value="2">２ 回</option>
   <option value="3">３ 回</option>
   <option value="5">５ 回</option>
   <option value="8">８ 回</option>
   <option value="-1" selected>無限</option>
  </select>
 </p>
<p>■以下のボタンでスピードを調整できます。</p>
 ▼スクロールの再描画間隔(scrolldelay属性)を 
  <input type="button" name="delay1" value="+ (遅く)" onclick="ChangeDelay(30)">
  ／<input type="button" name="delay2" value="- (速く)"  onclick="ChangeDelay(-30)"><br>
  現在のscrolldelay値は「<span id="de_value" style="color:red;font:12"></span>」ミリ秒<br>
 ▼スクロールの移動ピクセル数(scrollamount属性)を 
  <input type="button" name="amount1" value="- (遅く)"  onclick="ChangeAmount(-2)">
  ／<input type="button" name="amount2" value="+ (速く)"  onclick="ChangeAmount(2)"><br>
  現在のscrollamount値は「<span id="am_value" style="color:red"></span>」ピクセル</p>
</form>

end(最終更新:12/11/7)