jqfloat.jsを複数の画像に適用したい
javascriptで7枚の画像をブラウザの中にランダム配置で表示させ、
さらにjQueryのjqfloat.jsで画像をふわふわ動かす、というものを作っています。
ランダム配置まではうまくいったのですが
jqfloatが７枚のうち１枚にしか適用されず困っております。（最後のid='fuwa'のところ）
jsの勉強を始めたばかりでスクリプトの書き方が変だったりするかもしれませんが…
どなたか対処法を教えていただけませんでしょうか。
どうぞよろしくお願い致します！
<script type="text/javascript"><!--
$(document).ready(function() {
$('#fuwa').jqFloat({
width: 50,
height: 50,
speed: 2500
});
});
var images = [
{img : "1.png" , url : "http://1.com"},
{img : "2.png" , url : "http://2.com"},
{img : "3.png" , url : "http://3.com"},
{img : "4.png" , url : "http://4.com"},
{img : "5.png" , url : "http://5.com"},
{img : "6.png" , url : "http://6.com"},
{img : "7.png" , url : "http://7.com"}
];
images.sort(function(){return Math.random() - Math.random();});
function getBrowserWidth ( ) {
if ( window.innerWidth ) { return window.innerWidth; }
else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; }
else if ( document.body ) { return document.body.clientWidth; }
return 0;
}
function getBrowserHeight ( ) {
if ( window.inneHeight ) { return window.innerHeight; }
else if ( document.documentElement && document.documentElement.clientHeight != 0 ) { return document.documentElement.clientHeight; }
else if ( document.body ) { return document.body.clientHeight; }
return 0;
}
Imgn=7;
for (i=0; i < Imgn; i++){
xpx = 50+Math.floor(Math.random() * (window.innerWidth -280)) + 1;
ypx = 30+Math.floor(Math.random() * (window.innerHeight -300)) + 1;
thumbs="<div style='position:absolute;left:"+ xpx +"px;top:"+ ypx +"px;' id='fuwa'><a href='"+images[i].url+"'><img src='"+images[i].img+"'></a></div>";
document.write(thumbs);
}
</script>
お礼
どうもありがとうございました。