背景移動12■ボタンクリック背景移動上下     最終修正日 : 2016/04/02

◎動くJavaScript◎

画像の中の右端の赤いボタンをクリックして移動を操作できます。▲で上へ移動、■で停止、▼で下へ移動。

●2016/04/02:即時関数で囲んで、グローバル変数を消しました。
背景移動のJavaScriptついては、とらねこ庵オリジナルJavaScript を参考に、2015/06/16より少しずつリニューアルします。

背景移動と、HIMAJINサイトのボタン操作(JavaScript)を合成して作成しました。
tableの背景画像が上下に移動するJavaScriptです。
画像の右端に設置した赤いボタンをクリックして、背景画像を上へ移動させたり、下へ移動させたり、停止させたりが可能です。

背景画像をdiv空間ではなくテーブル(table)にしたのは、div空間よりもボタン設置が簡単だからです。
お好みでdiv空間に変更して下さい。
その時はdivにid="akaB"を指定し、ボタンはtdではなく、pか別のdivに class="bt"を指定します。

今回も、背景画像サイズ指定を使用。background-size: 100% auto;です。
横幅一杯の100%表示なので、使用した画像の実寸よりも拡大表示になります。
実際の画像は横幅800px縦幅450pxです。

■2016/04/02:ボタン操作の参考サイトを変更したので、ソースが短くなりました。