指定した領域の中に画像を散らす

jqueryとjQueryRotateを使って、ランダムに画像を散らします。

jQueryRotateはこちらから
https://code.google.com/p/jqueryrotate/downloads/list

【動作確認済】
全てWINです。
IE7（tester）
IE8(winXP)
IE10(win7)
IE11(win8)
safari最新
chrome最新

画像サイズとが角度がランダム版

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>
<script type="text/javascript">
$(function(){
//配置したい画像
	Imgset = new Array();
	Imgset[0] = "img/bg_01.png";
	Imgset[1] = "img/bg_02.png";
//配置したい画像の数
	Imgn=20;
//画像を配置したい場所
	var ImgWrap = '#inBg'
//画像のサイズ
	var img_width = 100;
	var doc_width = $(ImgWrap).width();
	var doc_height= $(ImgWrap).height();

//画像を配置する
	for (i=0; i < Imgn; i++){
		n = Math.floor(Math.random()*Imgset.length);
		xpx = Math.floor(doc_width*Math.random()); 
		ypx = Math.floor(doc_height*Math.random());
		wpx = Math.floor(img_width*Math.random());
		var nowRotateClass = 'rotateClass' + i;
		var rotateAngle = Math.random()*360;
		ribon="<div style='position:absolute;left:"+ xpx +"px;top:"+ ypx +"px;'><img src='"+Imgset[n]+"' class='"+nowRotateClass+"' width='"+wpx+"'></div>";
		/*document.write(star);*/
		var selectNowRotateClass = '.' + nowRotateClass
		$(ImgWrap).append(ribon);
		$(selectNowRotateClass).rotate(rotateAngle);
	}
});
</script>

画像サイズとが角度が指定できる版

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>
<script type="text/javascript">
$(function(){
//配置したい画像
	Imgset = new Array();
	Imgset[0] = "img/bg_01.png";
	Imgset[1] = "img/bg_02.png";
//配置したい角度
	rotateAngle = new Array();
	rotateAngle[0] = 30;
	rotateAngle[1] = 330;
//配置したい画像の数
	Imgn=20;
//画像を配置したい場所
	var ImgWrap = '#inBg'
//配置したい画像のサイズ
	imgWidth = new Array();
	imgWidth[0] = 68;
	imgWidth[1] = 40;
	var doc_width = $(ImgWrap).width();
	var doc_height= $(ImgWrap).height();

//画像を配置する
	for (i=0; i < Imgn; i++){
		n = Math.floor(Math.random()*Imgset.length);
		n2 = Math.floor(Math.random()*rotateAngle.length);
		n3 = Math.floor(Math.random()*imgWidth.length);
		xpx = Math.floor(doc_width*Math.random()); 
		ypx = Math.floor(doc_height*Math.random());
		var nowRotateAngle = rotateAngle[n2];
		var nowImgWidth = imgWidth[n3];
		var nowRotateClass = 'rotateClass' + i;
		ribon="<div style='position:absolute;left:"+ xpx +"px;top:"+ ypx +"px;'><img src='"+Imgset[n]+"' class='"+nowRotateClass+"' width='"+nowImgWidth+"'></div>";
		/*document.write(star);*/
		var selectNowRotateClass = '.' + nowRotateClass
		$(ImgWrap).append(ribon);
		$(selectNowRotateClass).rotate(nowRotateAngle);
	}
});
</script>