- 締切済み
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>
- yuki78
- お礼率50% (1/2)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
- fujillin
- ベストアンサー率61% (1594/2576)
jqfloatって知りませんけれど、もともと複数のオブジェクトに対応しているみたいですので、順に定義すればよろしいかと。 http://www.webantena.net/javascriptjquery/plugin-jqfloat/ document.writeで書くのはあまりお薦めできませんので、上記の例のような方法がよろしいでしょう。 （特に、document.writeにする理由があれば別です） 対象が画像に決まっているなら、例えば・・・ <div id="hoge"> <a href="http://1.com"><img src="1.png" alt=""></a> <a href="http://2.com"><img src="2.png" alt=""></a> ・・・・・・・ </div> とでもしておいて、 CSSで #hoge>a { display:block; position:absolute; } $("#hoge>a").each(function(){ ～～～ }); のような方法で処理をしてあげればよいのでは？
お礼
fujillinさん、回答ありがとうございます。 document.writeは使いどころが難しいんですね… そしてreadyではなくeachを使うんですね！勉強になります。 できれば追加で教えていただきたいのですが… 画像をランダムな座標に表示するために、 thumbs="<div style='position:absolute;left:"+ xpx +"px;top:"+ ypx +"px;' id='fuwa'>… document.write(thumbs); このような形でランダムな数値が入るようにしておりました。 これはどのように変更すれば良いでしょうか？？ 画像毎に座標を変えたいのですが、うまく行かず… どうぞよろしくお願い致します！
補足
fujillinさん、お返事ありがとうございます。 書き方が分かりにくくてすみません、変更するというより、 どこで指定してやれば良いかという質問です！ 現在下記のようなコードで試行錯誤中なのですが readyをeachにすると、ふわふわもしなくなってしまいました…。 どうぞよろしくお願い致します。 CSS-------- #hoge>a { display:block; position:absolute; left:"+ xpx +"px; top:"+ ypx +"px} HTML-------- <script type="text/javascript"> $("#hoge>a").each(function(){ $('#box1').jqFloat({ width: 100, height: 100, speed: 500 }); $('#box2').jqFloat({ width: 50, height: 150, speed: 1000 }); }); 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; } xpx = 50+Math.floor(Math.random() * (window.innerWidth -280)) + 1; ypx = 30+Math.floor(Math.random() * (window.innerHeight -300)) + 1; </script> </head> <body> <div id="contents"> <div id="box1"><a href="http://1.com"><img src="1.png" alt=""></a></div> <div id="box2"><a href="http://2.com"><img src="2.png" alt=""></a></div> </div> </body> </html>