背景移動13■ランダム背景移動左右ボタン     最終修正日 : 2016/04/02

◎動くJavaScript◎

右上のボタンをクリックして
移動を操作できます。
<<で左へ移動、stopで停止、
>>で右へ移動。

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

背景移動と、HIMAJINサイトのボタン操作(JavaScript)を合成して作成しました。
bodyの背景画像が左右に移動するJavaScriptです。
タイトルのの右側に設置したボタンをクリックして、背景画像を右へ移動させたり、左へ移動させたり、停止させたりが可能です。
今回はさらに複数の背景画像のランダム表示を付けたので、ページを開くたびに背景画像と左側の小さな画像が変化します。
ランダムなので、たまに同じ画像が出ることもあります。

ブラウザを更新するか、更新ボタンを押してみて下さい。→

今回も、背景画像サイズ指定を使用。指定は、background-size:auto 700px;です。
この指定は、画像の縦幅だけ700pxに統一して、横幅は自動表示になります。
使用した画像の実寸は横幅195px縦幅500pxです。

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