背景画像や色をランダムに変更「RandomBackground」
当ページのリンクには広告が含まれています。
スポンサーリンク
背景画像や色をランダムに変更するプラグイン「RandomBackground」を紹介します。
jQueryプラグイン「RandomBackground」
このプラグインを使えば、指定した要素の背景画像や色をランダムに変更することができます。
変更したい画像や色をオプションでいくつか指定すると、ページが更新されるたびに指定したものの中からランダムに変更します。
他にもオプションで ID やクラス名、画像のパスを指定します。
スポンサーリンク
それではデモページをご覧ください。何度かページを更新してみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="RandomBackground のデモでーす。">
<title>RandomBackground - jQuery Plugin - Demo</title>
</head>
<body class="demo">
<h1>RandomBackground のデモ。</h1>
<p>ページを更新してみてください。</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.randombackground.min.js"></script>
<script>
$(document).ready(function() {
randomBackground.init({
parent: '.demo',
background: '.demo',
path: 'images/',
images: [
'01-red.png',
'02-orange.png',
'03-yellow.png',
'04-green.png',
'05-blue.png',
'06-indigo.png',
'07-purple.png'
],
bgcolor: ['#000', '#ccc', '#fafafa'] });
});
</script>
<footer style="margin-top:20px">
<a href="https://webkaru.net/jquery-plugin/randombackground/">「jQueryプラグインまとめ」に戻る</a>
</footer>
</body>
</html>
スポンサーリンク