同じ画像を右から左へ左から右へと続けて移動させたい。同じ画像を右から左へ左から右へと続けて移動させたい。|
|
|
同じ画像を右から左へ左から右へと続けて移動させたい。 |
| 対応状況 |  |
 |
 |
 |
head部のソース
<head>
<style type="text/css">
<!--
span.sham {
visibility:hidden;
width:100%;
} /* spanのスタイル */
img.sham {
filter:FlipH();
position:relative;
left:-40px;
} /* imgのスタイル */
-->
</style>
</head><body>
<marquee direction="left" scrollamount="2">
<img src="../img/Denden1.gif" width="40" height="46" alt="でんでんブタ1">
<img src="../img/Denden2.gif" width="40" height="46" alt="でんでんブタ2">
<img src="../img/Denden3.gif" width="40" height="46" alt="でんでんブタ3">
<span class="sham">右から左へ移動します。</span></marquee>
<marquee direction="right" scrollamount="2">
<img src="../img/Denden1.gif" width="40" height="46" alt="でんでんブタ1" class="sham">
<img src="../img/Denden2.gif" width="40" height="46" alt="でんでんブタ2" class="sham">
<img src="../img/Denden3.gif" width="40" height="46" alt="でんでんブタ3" class="sham">
<span class="sham">左から右へ移動します。</span></marquee>
</body>どうですか？かなり強引に誤魔化してるでしょ？ span
エレメントで隠した文字（右から左へ移動します。）で画像が移動してない様に見せています。ちなみに文字は何でも良いです。(^^)一応左から右へ移動させる時にはfilter:FlipH();で画像を左右反転させています。また、左右反転後いきなり出てくると不味いので少しこだわってleft:-40px;を使って画像ひとつ分ズラしてます。
表示
| 対応状況 | |
|
|
|
head部のソース
<head>
<style type="text/css">
<!--
div.comego{
visibility:hidden;
position:absolute;
width:120px;
} /* divのスタイル */
-->
</style>
<script type="text/JavaScript">
<!--
var sec = 100;
function gooo(divID,speed,x) //右から移動する関数。
{
x -= speed;
scrollOBJ = document.all[divID].style;
layWidth = -document.all[divID].clientWidth; //反転位置（オブジェクトのWidth）を取得。
scrollOBJ.left = x; //オブジェクト移動。
scrollOBJ.visibility = "visible"; //表示させる。
scrollOBJ.filter = "false"; //filter解除。
if (x >= layWidth) setTimeout("gooo('"+divID+"',"+speed+","+x+")",sec) //反転位置まで再帰処理。
else come(divID,speed,x); //反転位置ならば関数comeへ。
}
function come(divID,speed,x) //左から移動する関数。
{
x += speed;
scrollOBJ = document.all[divID].style;
scrollOBJ.left = x; //オブジェクト移動。
scrollOBJ.visibility = "visible"; //表示させる。
scrollOBJ.filter = "FlipH()"; //左右反転。
startPos = document.body.clientWidth; //スタート位置取得。
if (x != startPos) setTimeout("come('"+divID+"',"+speed+","+x+")",sec) //スタート位置まで再帰処理。
else ComeGoStart(divID,speed); //スタート位置ならば関数ComeGoStartへ（最初から）。
}
function ComeGoStart(divID,speed)
{
if ((!document.all && document.getElementById) || document.layers) //ネスケは表示するだけ。
{
if (document.layers) nnOBJ = document.layers[divID];
if (document.getElementById) nnOBJ = document.getElementById(divID).style;
nnOBJ.visibility = "visible";
}
else //IEは関数goooへ。
{
startPos = document.body.clientWidth; //スタート位置取得。
setTimeout("gooo('"+divID+"',"+speed+","+startPos+")",sec);
}
}
//-->
</script>
</head><body onLoad="ComeGoStart('denden',2);">
<div id="denden" class="comego"><pre><img src="../img/Denden1.gif"
width="40" height="46" alt="でんでんブタ1"><img src="../img/Denden2.gif"
width="40" height="46" alt="でんでんブタ2"><img src="../img/Denden3.gif"
width="40" height="46" alt="でんでんブタ3"></pre></div>
</body>は左右反転の表示のタイミングが若干ズレます。のバグなのかな？画像を
pre エレメントで括っているのは成形済みにしておかないとスタート位置へ戻る時に縦一列になってしまうからです。苦肉の策です。(^_^;)
div.comego内の width プロパティですが、 div エレメントで括っている画像の各
width アトリビュートの合計を記述して下さい。（このサンプルですと、40ピクセル×3＝120ピクセルとなります。）これを指定しないと画像が左端に隠れてくれません。(^^ゞ なお、グローバル変数は
sec のみで後は引数として各関数へ渡してますから、ComeGoStart関数は引数を変更しさえすれば、幾つでも記述可能になってます。ComeGoStart(divID,speed)の引数
divID は id 名を、引数 speed は移動ピクセル値（marqueeで言うところのscrollamountと同じと思って結構です）を代入して使って下さい。
表示
pokochan@mx1.tees.ne.jp
