[JS]背景全体に画像を固定させ、ランダム表示もできるjQuery プラグイン「jQuery Backstretch」
スポンサード
背景画像のパスを
jQuery Backstretch による単体画像の背景設置デモ
先の単体画像の時と同様、
また
あとは画像をランダム表示させる要素(上記例では body)に対して
↓こんな感じで、アクセス毎に背景画像がランダムで切り替わります。
背景画像をランダムで出力するデモ
スポンサード
ブラウザの幅に合わせて画面いっぱいに画像を表示してくれるjQuery プラグイン jQuery Backstretch。
1 枚だけの背景画像をブラウザ幅に合わせてフルスクリーン表示できるのはもちろん、カスタマイズ次第では複数枚の画像をアクセス毎にランダムで切替表示することもできる便利なプラグインです。
目次
jQuery Backstretch のダウンロード
以下のページより jQuery Backstretch のファイルをダウンロードします。jQuery Backstretch の設置
jquery ファイルと一緒に jquery.backstretch.min.js を設置します。<script src="./jquery.min.js"></script> <script src="./jquery.backstretch.min.js"></script> <script> $.backstretch('./画像ファイルのパス'); </script>
背景画像のパスを
$.backstretch('');
内に設定すれば、以下のデモページのように画像をブラウザ幅に合わせてフルスクリーン表示させることができます。jQuery Backstretch による単体画像の背景設置デモ
背景画像をランダムで出力する
ちょっとカスタマイズするだけで、複数枚の画像をアクセス毎にランダム表示させることもできます。<script src="./jquery.min.js"></script> <script src="./jquery.backstretch.min.js"></script> <script> $(document).ready(function(){ bgimgsum=5; randomnum = Math.round( Math.random()*(bgimgsum-1))+1; bgimgurl=( $.backstretch('./画像のフォルダ/images0'+randomnum+'.jpg')); $('body').css('background-image',('url("'+bgimgurl+'")')); }); </script>画像全部で5 枚(
bgimgsum=5
)あるとして、それらをランダム表示する処理を入れています。先の単体画像の時と同様、
$.backstretch('')
に画像ファイルのパスを入れるのですが、ランダム表示させる画像はどこか1箇所のフォルダに集めておくのがベストです。また
randomnum
には数字が入ってくるので、画像名「images01.jpg」「images02.jpg」…のように連番にしておくと良いと思います。あとは画像をランダム表示させる要素(上記例では body)に対して
background-image
のプロパティを追加します。↓こんな感じで、アクセス毎に背景画像がランダムで切り替わります。
背景画像をランダムで出力するデモ
スポンサード
コメント