.
ハーイ 皆さん １８章のテーブル背景の 更なる発展 テーブル背景のスクロールを今回やってみましょう。
あやなおたかしゅんさんから 背景スクロールのscriptをお借りしましたので、 テーブル背景スクロールが簡単に出来るようになりました。
(^_^)/ クッピー …c(゜^ ゜ ;)ウーン イマイチ 意味が分からないけど どういうことかしら？
そうね テーブル背景ができたでしょう。 こんどは その背景を動かしてみようということです。
まずは これを見てくださいね
１． １８章でやった テーブル背景ですね。
上のテーブル背景を 動かしてみましょう。 画面どこをクリックしても止まります。
オオーw(*゜o゜*)w すごい まるで マジシャンみたい いや〜 クッピーすごい クッピーではなく
あやなおたかしゅんさんだわ・・・・・(￣。￣ )ボソ... これから どうするの？
まずは このやり方ですが、
ソースは 次のようになります
<IMG id="gazou1" src="kabe.jpg" style="position:absolute; visibility:hidden;">
<TABLE id="table1" border="1" width="200" height="200">
<TBODY>
<TR>
<TD></TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT Language="JavaScript">
<!--
table1.style.background = "url("+gazou1.src+")"
var th=45//角度
var s=5//速度：一回の移動量（大きければ大きいほど早くなりますが、動きががくがくしてきます。）
var ss=100//速度：繰り返し速度（小さければ小さいほど早くなり、なめらかな動きになりますが、ＣＰＵ負担は大きくなります。通常：100）
var starttime=3//始まる速度
th=th/180*Math.PI
var x=s*Math.cos(th)
var y=-s*Math.sin(th)
var iii=0
function bgroundr(namet,xx,yy) {
if(iii!=0) return
eval(namet+'.style.background = "url("+gazou1.src+") position-x "+xx+"px position-y "+yy+"px"')
setTimeout('bgroundr("'+namet+'",'+(xx+x)+','+(yy+y)+')',ss)
}
setTimeout('bgroundr("table1",0,0)',starttime*1000)
//-->
</script>
このままメモ帳に貼り付けて赤い部分を変更して色々な変化を見ることができます。
今 画面をクリックすると 動きが止まりますと↑に書いていますね、 これは <BODY
onclick="iii=1"> bodyのタグにonclick="iii=1"を
入れているからです。 入れなければ 止まりません そのまま動いています。
桂ちゃんが作ったサンプルです ・・・ サンプル
テーブルの背景画像星の上に画像を重ねていますね。
次に フィルターを入れてすこし 透過してみましょう。
テーブルの部分にフィルターをかけます。 ３０パーセントでかけています・・・ 30%透過サンプル です。
どうして 透過をやってみたかといいますと。 透過ができると 画像を 背景の下において背景を透過して動かすと 霧や雨や その他色々 活用できますね。 フィルターのソースを次の場所に入れます。
<TABLE id="table1" style="filter:alpha(Opacity=30)" border="1" width="200" height="200">
霧の画像でやってみました・・・ サンプルです
霧らしくなっていると思います。 あやなおたかしゅんさんの説明で更に詳しく書かれています。 サンプル
パチッ☆-(^ー'*)bナルホド もう ただただ 感心して聞いていたわ。 それに ほんと 自然な動き
また その動きや 角度を自分で調整することもできるのね。 σ(^_^)アタシも やってみるわね
ここに簡単に作った クリスマスカード風ひな形のソースと画像をおきますね ・・・サンプル
やってみてくださいね
１． 画像を保存します。新しくフォルダーを作るといいですね
２． メモ帳を立ち上げて TIMEの基本ソースが入っているものでもいいです。 下のソースをそのまま貼り付けます。
３． １で画像を保存した場所に htmlで保存します。
そうすると ↑のサンプルのクリスマスカードが出来ていると思います 画像を変えて やってみてくださいね
画像
 |
 |
 |
| 雪景色 ファイル名 yuki2.jpg |
雪 ファイル名 yuki.gif |
ロゴ ファイル名 logo.jpg |
【ソース】
<IMG id="gazou1" src="yuki.gif" style="position:absolute; visibility:hidden;">
<IMG src="yuki2.jpg" style="position:absolute; left : 84px; top : 45px;">
<IMG src="logo.jpg" style="position:absolute; left : 435px; top : 445px;
width : 248px;
height : 37px;
" width="248" height="37">
<TABLE id="table1" border="0" style="position:absolute; filter:alpha(Opacity=50); left : 84px; top : 45px;" width="558" height="424">
<TBODY>
<TR>
<TD></TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT Language="JavaScript">
<!--
table1.style.background = "url("+gazou1.src+")"
var th=270//角度
var s=3//速度：一回の移動量（大きければ大きいほど早くなりますが、動きががくがくしてきます。）
var ss=100//速度：繰り返し速度（小さければ小さいほど早くなり、なめらかな動きになりますが、ＣＰＵ負担は大きくなります。通常：100）
var starttime=3//始まる速度
th=th/180*Math.PI
var x=s*Math.cos(th)
var y=-s*Math.sin(th)
var iii=0
function bgroundr(namet,xx,yy) {
if(iii!=0) return
eval(namet+'.style.background = "url("+gazou1.src+") position-x "+xx+"px position-y "+yy+"px"')
setTimeout('bgroundr("'+namet+'",'+(xx+x)+','+(yy+y)+')',ss)
}
setTimeout('bgroundr("table1",0,0)',starttime*1000)
//-->
</script>
いかがでしょうか それでは あなたのテーブル背景スクロール いろいろな雛形お待ちしています
魅せられた仲間の参考作品です
桂作 こきつねと雪 クッピー作 茜 色
いかがでしょうか 霧の画像 ちょっと 駄作ですが 作ってみましたので お使いください
(*^.^*)エヘッ フィルターをかけると 汚いところがわからなくなります
