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>
お礼
御返答ありがとうございます。 URLのページを参考にしましたが問題解決には至りませんでした。ですが、掲載されていた内容はとても興味深くまた、私の知らない情報もありましたので大変参考になりました。 ちょっと調べてみたのですがAndroidのバージョンによってこれらのプロパティから取得できる数値が違うことがわかりました。 Android1.6では御提供いただいたプロパティで正解でした。 ですが Android2.0ではViewport言われる内部仮想スクリーンの固定数値しか返さないことがわかりました。 それ以降のバージョンでは実機を持っていないので確認できませんでしたが・・・ 何れにせよ御提供いただいた情報は大変参考になりました。 ありがとうございます。