スクロールスクロール|
|
|
スクロール |
scrolllay1」をページ右端から左端まで２ピクセルずつ左に移動させています。| 対応状況 |  |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
head部のソース
<head>
<style type="text/css">
<!--
div.scroll{
visibility:hidden;
position:absolute;
font-size:15px;
clip:rect(0px,650px,16px,0px);
} /* divのスタイル */
-->
</style>
<script type="text/JavaScript">
<!--
var sec = 100;
function scroll(divID,speed,x) //右から移動する関数。
{
x -= speed;
if (document.all) //IE対応。
{
scrollOBJ = document.all[divID].style;
layWidth = -scrollOBJ.pixelWidth;
}
if (document.layers) //NN対応。
{
scrollOBJ = document.layers[divID];
layWidth = -scrollOBJ.clip.right;
}
if (document.getElementById) //DOM対応。
{
scrollOBJ = document.getElementById(divID).style;
layWidth = parseInt(-scrollOBJ.width.slice(0,-2));
}
scrollOBJ.left = x; //オブジェクト移動。
scrollOBJ.visibility = "visible"; //表示させる。
if (x >= layWidth) setTimeout("scroll('"+divID+"',"+speed+","+x+")",sec) //終了位置まで再帰処理。
else scrollStart(divID,speed); //終了位置ならば関数scrollStartへ。
}
function scrollStart(divID,speed)
{
if (document.all) startPos = document.body.clientWidth; //スタート位置取得。
if (document.layers) startPos = window.innerWidth; //ネスケ4.x
if (document.getElementById) startPos = document.body.clientWidth;
if (!document.all && document.getElementById) startPos = window.innerWidth; //ネスケ６.x
setTimeout("scroll('"+divID+"',"+speed+","+startPos+")",sec);
}
//-->
</script>
</head><body onLoad="scrollStart('scrolllay1',2);scrollStart('scrolllay2',5);">
<div id="scrolllay1" class="scroll" style="width:650; height:30;"><pre>
スタイルシートを移動しています。ネットスケープ4.xと6.xもスクロールしますよ〜。</pre></div>
<br>
<div id="scrolllay2" class="scroll" style="width:650; height:30;"><pre>
<img src="../img/nn4.gif" width="15" height="15" border="0" alt="N4"><img src="../img/ie4.gif"
width="15" height="15" border="0" alt="E4">以降に対応しておりま〜す。このように画像もスクロール出来ちゃいますよ〜。(^o^)丿
</pre></div>
</body>スタイルシート「scrolllay2」もページ右端から左端まで5ピクセルずつ左に移動させています。このようにID名を変更しさえすれば幾つでもスクロールさせられます。ここで注目していただきたいのは、の場合
width 属性を直接取得することができないので
clip 属性を指定しておいて、clip.rightにて取得するというところです。また、 も
clientWidth では width 属性を取得できないのでwidthプロパティをslice(0,-2)（文字列として認識されるのでpxを除去）してparseInt()で数値に変換します。IEも動作するのでDOMは統一しました。なお、スタイルシートの
width、height
は style アトリビュートで指定して下さい。そうしないと取得出来ません。
表示
スタイルシートを移動しています。ネットスケープ4.xと6.xもスクロールしますよ〜。
応用 ちょっと応用すれば行ったり来たりします。右から移動する関数を左から移動する関数に変更（-を+にするだけです）すればOK。ソースは右クリックして見てください。
| 対応状況 | |
|
|
|
|
|
|
|
|
|
|
head部ソース
<head>
<style type="text/css">
<!--
#stafflay{
visibility:hidden;
position:absolute;
font-size:15px;
clip:rect(0,550,385,0);
text-align:center;
} /* divのスタイル */
body {
color:blue;
background-color:yellow;
overflow:hidden;
} /* bodyのスタイル *
-->
</style>
<script type="text/JavaScript">
<!--
var stopFlag = false;
sec = 100;
function staffRoll(divID)
{
y -= 2;
if (document.all) layHeight = -staffOBJ.pixelHeight;
if (document.layers) layHeight = -staffOBJ.clip.bottom;
if (document.getElementById) layHeight = parseInt(-staffOBJ.height.slice(0,-2));
staffOBJ.top = y; //オブジェクト移動。
staffOBJ.visibility = "visible";
if (!stopFlag) //trueの場合のみスクロールする。
{
if (y >= layHeight) setTimeout("staffRoll('"+divID+"')",sec) //終了位置まで再帰処理。
else staffRollStart(divID); //終了位置ならば関数staffRollStartへ。
}
}
function staffRollStart(divID)
{
if (document.all)
{
staffOBJ = document.all[divID].style;
x = document.body.clientWidth / 2;
x = x - (staffOBJ.pixelWidth / 2); //オブジェクトのセンタリング位置取得。
y = document.body.clientHeight;
}
if (document.layers)
{
staffOBJ = document.layers[divID];
x = window.innerWidth / 2;
x = x - (staffOBJ.clip.right / 2); //オブジェクトのセンタリング位置取得。
y = window.innerHeight;
}
if (document.getElementById)
{
staffOBJ = document.getElementById(divID).style;
x = document.body.clientWidth / 2;
x = x - (document.getElementById(divID).clientWidth / 2); //オブジェクトのセンタリング位置取得。
y = document.body.clientHeight;
}
if (!document.all && document.getElementById)
{
staffOBJ = document.getElementById(divID).style;
x = window.innerWidth / 2;
x = x - (parseInt(staffOBJ.width.slice(0,-2)) / 2); //オブジェクトのセンタリング位置取得。
y = window.innerHeight;
}
staffOBJ.left = x; //オブジェクトをセンタリングする。
setTimeout("staffRoll('"+divID+"')",sec);
}
//-->
</script>
</head><body link="#008000" vlink="#008000" alink="#ff0000" onLoad="staffRollStart('stafflay');">
<center><div id="stafflay" style="width:550; height:385px;"><pre>
<font color="#ff9900"><b>謝辞 m(_ _)m</b></font>
このサイト作成にあたり、お世話になった方・ソフト・素材・サイト様に、
この場を借りて御礼申し上げます。
<a href="http://www.tees.ne.jp/~y-tsuzu/index.html" onMouseOver="stopFlag = !stopFlag;"
onMouseOut="stopFlag = !stopFlag; staffRoll('stafflay');">トド様 + ネコ様 （HironekoHP）</a>
いつも表示テストをしていただいており大変感謝しています。
今後もよろしくお願いいたします。
<a href="http://homepage1.nifty.com/kazina/" onMouseOver="stopFlag = !stopFlag;"
onMouseOut="stopFlag = !stopFlag; staffRoll('stafflay');">Ｋａｚ様 （in@）</a>
Kaz/ina印のフリーソフト「色取鳥」、色については全面的にお世話にな
っており、わたしにとってサイト作成に欠かせないツールとなってます。
<a href="http://www.vector.co.jp/authors/VA013341/" onMouseOver="stopFlag = !stopFlag;"
onMouseOut="stopFlag = !stopFlag; staffRoll('stafflay');">橋本健一様 （おれんち工房）</a>
HTMLに関しては全くの素人であった私を、ここまで導いてくれたのも
「おれんちのＨＴＭＬ」のおかげだと感謝しております。
<a href="http://www.yo.rim.or.jp/~nakagawa/" onMouseOver="stopFlag = !stopFlag;"
onMouseOut="stopFlag = !stopFlag; staffRoll('stafflay');">中川真実様 （Nakagawa Masami Home Page with Java）</a>
Free Applets StaffRoll (ver.1.0)を再現したつもりです。(^_^;)
如何でしょうか？<img src="../img/nn4.gif" width="15" height="15" border="0" alt="N4"><img
src="../img/ie4.gif" width="15" height="15" border="0" alt="E4">当然のことながら画像もOK！
</pre></div></center>
</body>
stopFlagを追加し初期値をfalseにしてonMouseOver="stopFlag = !stopFlag;"でstopFlagを変更（反転）します。マウスが離れた場合には、onMouseOut="stopFlag = !stopFlag; staffRoll('stafflay');"でstopFlagを変更（反転）しstaffRoll('stafflay')を実行してスクロールを再度動作させます。なお、センタリング不要の場合は、staffOBJ.left = x; を消して下さい。//でコメントアウトして頂いても結構です。
表示
お名前にはリンクを張っております。お名前にマウスカーソルが重なった場合、文字の色が変化すると同時に、クリックを容易にするためスクロールが停止します。
実行するにはここをクリックして下さい。
pokochan@mx1.tees.ne.jp