• 締切済み

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>

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

ANo1です。 ＞これはどのように変更すれば良いでしょうか？？ えっと…、ご提示のスクリプトでその前のxpx、ypxの算出でランダムになっていると思いますが、それをどのように変えたいのでしょうか？ 変える必要がなければそのままでよろしいかと… もっとも、ランダムにしているために、画像が重なったり偏ったりということが起きることが想像されますが、これを制御しだすと、そもそも『ランダム』ではなくなってしまいますので… ※HTMLやCSSが提示されていないので、その辺はよしなに想像して回答しています。

yuki78
質問者

補足

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>

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

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(){ 　　～～～ }); のような方法で処理をしてあげればよいのでは？

yuki78
質問者

お礼

fujillinさん、回答ありがとうございます。 document.writeは使いどころが難しいんですね… そしてreadyではなくeachを使うんですね！勉強になります。 できれば追加で教えていただきたいのですが… 画像をランダムな座標に表示するために、 thumbs="<div style='position:absolute;left:"+ xpx +"px;top:"+ ypx +"px;' id='fuwa'>… document.write(thumbs); このような形でランダムな数値が入るようにしておりました。 これはどのように変更すれば良いでしょうか？？ 画像毎に座標を変えたいのですが、うまく行かず… どうぞよろしくお願い致します！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • XHTML（厳格）でJavaScriptが動かない

    ソースを書くと見ずらいので、 ＵＲＬで提示しますと http://martin.p2b.jp/index.php?UID=1115484023 の部分ですが、 d.body.appendChild(imgPop); （d=document と宣言されているとする） で、エラーもなく、どのブラウザーでも何も動いてくれません。 ちなみに、XHTMLで奨励されている Content-type: application/xhtml+xml で出力するようにしています。 (metaでは一切宣言してません） これを普通に、text/html に出力させるだけで 動作するのはするのですが・・・ どなたか、mime type を変更せずに 解決できる方はいらっしゃいますでしょうか？ よろしくお願いします。 p.s. d.body.innerHTML="hoge"; はできるようです。 ------------ 見ずらいですが、ソースはこちら var d=document; function getClientWidth(){ if(self.innerWidth){ return self.innerWidth; } else if(d.documentElement && d.documentElement.clientWidth){ return d.documentElement.clientWidth; } else if(d.body){ return d.body.clientWidth; } } function getClientHeight(){ if(self.innerHeight){ return self.innerHeight; } else if(d.documentElement && d.documentElement.clientHeight){ return d.documentElement.clientHeight; } else if(d.body){ return d.body.clientHeight; } } function getScrollY(){ if(typeof window.pageYOffset != "undefined"){ return window.pageYOffset; } else if(d.body && typeof d.body.scrollTop != "undefined"){ if(d.compatMode == 'CSS1Compat'){ return d.documentElement.scrollTop;; } return d.body.scrollTop; } else if(d.documentElement && typeof d.documentElement.scrollTop != "undefined"){ return d.documentElement.scrollTop; } return 0; } var imgPop = null; imagePop = function (e, path, w, h){ if(imgPop==null){ imgPop = d.createElement("IMG"); imgPop.src = path; with (imgPop.style){ position = "absolute"; left = Math.round((getClientWidth()-w) / 2) + "px"; top = Math.round((getClientHeight()-h) / 2 + getScrollY()) + "px"; margin = "0"; zIndex = 1000; border = "4px groove Teal"; display = "none"; } d.body.appendChild(imgPop); if(imgPop.complete){ imgPop.style.display = "block"; } else window.status = "画像読み込み中…"; imgPop.onload = function(){imgPop.style.display="block"; window.status="";} imgPop.onclick = function(){d.body.removeChild(imgPop);imgPop=null;} imgPop.title = "マウスクリックで閉じます"; } }

  • javascriptで画像サイズをウィンドウのサイズに合わせて表示する方法

    javascriptを最近はじめてみました。 しかしどうも慣れないためか、最後の一歩で思うように動いてくれません。 基本的にやりたい事はウインドウサイズに合わせて画像サイズを変更できるようにしたいと思ってます。 何とかいろいろ調べて、下記のスクリプトまで来たんですが （確かこのサイトの他の方への回答からほぼ活用） これでは画面が表示されるときにスクリプトが適用されません。 その後ウィンドウのサイズ変更をすると適用してくれるのですが。 なにやらとても簡単な事で上手く動いてくれないのかもしれませんが、 どうしてもできそうにありません。 どなたかお分かりの方がいましたらご教授願えると大変助かります。 よろしくお願いします。 以下、javascript↓ <body style="overflow:hidden" bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <img src="test.JPG" id="backgroundID" style="position:absolute;top:0px;left:0px;z-index:0;" onload="setSize()"> <div style=" color: black; font-size: medium; font-family: serif; visibility: visible; display: block; position: absolute; z-index: 1; top: -1px; left: 0"> <script type="text/javascript"> var imgObj = document.getElementById('backgroundID'); var imgSize = {w:0, h:0} window.onresize = setImg; window.onscroll = function() { var t, l; if (document.documentElement.scrollTop) { t = document.documentElement.scrollTop; l = document.documentElement.scrollLeft; } else if (document.body.scrollTop) { t = document.body.scrollTop; l = document.body.scrollLeft; } else { return; } imgObj.style.top = t + 'px'; imgObj.style.left = l + 'px'; } function setSize() { imgSize.w = imgObj.width; imgSize.h = imgObj.height; } function setImg() { var wh, pW, pH, c; wh = getWindowSize(); pW = wh.w / imgSize.w; pH = wh.h / imgSize.h; if (pW > 0 || pH > 0) { c = (pW > pH) ? pW : pH; imgObj.style.width = parseInt(imgSize.w * c + 1) + 'px'; imgObj.style.height = parseInt(imgSize.h * c + 1) + 'px'; } else { imgObj.style.width = imgSize.w + 'px'; imgObj.style.height = imgSize.h + 'px'; } } function getWindowSize() { var wh = {w:0, h:0}; if (document.body.clientWidth) { wh.w = document.body.clientWidth wh.h = document.body.clientHeight; } else if(document.documentElement.clientWidth) { wh.w = document.documentElement.clientWidth; wh.h = document.documentElement.clientHeight; } else if(window.innerWidth) { wh.w = window.innerWidth; wh.h = window.innerHeight; } return wh; } </script> </body>

  • google マップ サイズ変更

    グーグルマップで、windowsのサイズ変更をしたら、地図の大きさも材レクトに変わるという処理をしたく、ウェブを参考に作ったのですが、 ローカルだと、firefox,opera,ie6でできるのですが、 HPにuploadすると、operaでしか実現できません。他のだと地図サイズが変化しません。 どなたかアドバイスいただけたら幸いです。 //<![CDATA[ //スクリプト定義 var map; var latLng = new GLatLng(43,14); // 初期位置設定 function load() { resize(); if (GBrowserIsCompatible()) { //Google Maps 利用可能? map = new GMap2(document.getElementById("map")); // マップ1 map.setCenter(latLng, 13); // 起動時初期位置 } } function resize(){ var map_obj=document.getElementById("map"); var disp=getDispSize(); map_obj.style.width=disp.width-100+"px"; map_obj.style.height=disp.height-100+"px"; } function getDispSize(){ if(document.all){ if(window.opera){ return {width:document.body.clientWidth,height:document.body.clientHeight}; } else { return {width:document.documentElement.clientWidth,height:document.documentElement.clientHeight}; } } // NN else if(document.layers || document.getElementById){ return {width:window.innerWidth,height:window.innerHeight}; } } //]]>

  • ページの縦幅を取得する際の問題

    ページの縦幅は書き込まれる情報量によって動的に変わります。この縦幅を取得する良い方法がないか探していたところ、Lightboxの関数でまさしく探していたものがありました。 function getPageSize(){ var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth,pageHeight) return arrayPageSize; } この関数を実行すると配列[0]に横幅、配列[1]に縦幅が返ってきます。しかしページ内にCSSでposition: absoluteで位置を指定したオブジェクトがあると、それを認識できないのか求める数値とは違う（小さい）ものが返ってきてしまいます。これはどのようにして対応すればよいのでしょうか？

  • javascriptで困っています

    マウスがブラウザーの外側から出ると、ポップアップが出るようにしたいです。 loadEvents: function() { this.addEvent(document, "mouseout", function(e) { e = e ? e : window.event; if(e.target.tagName.toLowerCase() == "input") return; var vpWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); if(e.clientX >= (vpWidth - 50)) return; if(e.clientY >= 50) return; var from = e.relatedTarget || e.toElement; if(!from) bioEp.showPopup(); }.bind(this)); 現在は、上方向に出るとポップアップが出ます。 左右にマウスが出た時に、ポップアップ出るにはどう記述すれば良いでしょうか。 よろしくお願いいたします。

  • JS：画像を繰り返しランダム読込すると途中で止まる

    現状は、ページの読み込み時にランダムで2枚の画像を読み込んで、loadのたびに違う画像が表示されるようにしています。 それをリロードせずに繰り返し画像を切り変えるように変更したく下記のように「setTimeout("getImg()",1000); 」を追加したところ、画像の切り替え8回目の切り替えあたりで止まってしまいます。（その際、2枚の画像が同じ画像になります。毎回同じ画像でなるわけではない） 変数か何かをクリアすればいいような気はするのですが、初心者レベルのためわかりませんでした。 原因わかる方いましたらご教示頂ければ幸いです。 javascript：img1111.js ------------------------ function getImg(str){ //ランダム function randNum(){ var randNum = Math.floor(Math.random()*img.length); return randNum; } //表示処理 if(str=="wide"){ var n = randNum(); setIMG = 'url(images/'+img[n][1]+')'; document.getElementById('inner_recomend').style.backgroundImage = setIMG; if(img[n][0]){ setURL = '<a href="'+img[n][0]+'" target="_blank"></a>'; }else{ setURL = ''; } document.getElementById('right_contents_rec').innerHTML = setURL; }else{ //画像とURL取得 function imgSet(id,n){ var setIMG = 'url(images/'+img[n][1]+')'; document.getElementById(id).style.backgroundImage = setIMG; if(img[n][0]){ setURL = '<a href="'+img[n][0]+'" target="_blank"></a>'; }else{ setURL = ''; } document.getElementById(id).innerHTML = setURL; } var n = randNum(); imgSet('right_contents_rec1',n); img.splice(n,1); var nn = randNum(); imgSet('right_contents_rec2',nn); } //次のタイマー呼びだし setTimeout("getImg()",1000); } ------------- htmlは下記 ------------- <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="swap"> <div id="select01"> <div id="inner_recomend"> <div id="right_contents_rec1"></div> <div id="right_contents_rec2"></div> </div> </div> </div> </body> <script type="text/javascript" src="img1111.js"></script> <script type="text/javascript"> var img = new Array(); //画像リストの設定 ('URL','画像ファイル名') img[0] = Array('http://www.000.co.jp/','15961.jpg'); img[1] = Array('http://www.000.co.jp/','15962.jpg'); img[2] = Array('http://www.000.co.jp/','15963.jpg'); img[3] = Array('http://www.000.co.jp/','15964.jpg'); img[4] = Array('http://www.000.co.jp/','15965.jpg'); img[5] = Array('http://www.000.co.jp/','15966.jpg'); img[6] = Array('http://www.000.co.jp/','15967.jpg'); img[7] = Array('http://www.000.co.jp/','15968.jpg'); img[8] = Array('http://www.000.co.jp/','15969.jpg'); // getImg(); </script> </html> ------------- よろしくお願いいたします。

  • フレームでのcols設定について

    フレームを使用してホームページを作っている者です。 framesetのcolsの設定にて ブラウザの中心から左へ329ピクセル左をフレームの境目に設定したいのですが、 可能でしょうか？ 気持ちとしては <frameset cols="50%-329,*"BORDER="0"> と設定したい感じです。 JavaScriptを使用して ブラウザの幅を取得して半分にして329ピクセル加算する方法で実現しようと考え ------------------------------------------------------------------------------ <html lang="ja"> <HEAD> <title>フレーム設定</title> </HEAD> <script language="javascript" type="text/javascript"> //ブラウザ幅を求めるgetBrowserWidth() //my-notebook（http://osima.jp/blog/js-getBrowserWidth/index.html）さんから拝借 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; } </script> <script language="javascript" type="text/javascript"> //フレームの左側の幅を求めるLeftWide() function LeftWide() { var leftwide = (getBrowserWidth())/2-329; return leftwide; } //framesetを出力するFrameSet() function FrameSet() { var output = '<frameset cols="' + LeftWide() + ',*"BORDER="0">'; document.write(output); } </script> <script language="javascript" type="text/javascript"><!-- //FrameSet()の呼び出し FrameSet(); // --></script> <frame src="./左のページ.html" name="left" marginwidth="0"> <frame src="./右のページ.html" name="right"> </frameset> </html> ------------------------------------------------------------------------------ と書いたのですが、 getBrowserWidth() を<BODY>～</BODY>内に書かないとブラウザ幅を取得してくれないらしく、 return 0;が帰ってきてしまい、左のページだけ表示され期待した結果が得られませんでした。 framesetの有るHTMLには<BODY>～</BODY>は定義できないのでここで詰んでしまいました。 ブラウザの中心から左へ329ピクセル左をフレームの境目に設定出来るのであれば どんな方法でも構いません。 お知恵を拝借させてください。よろしくお願いします。 追記 当方ブラウザはIE9を使用しております。 HTML、JavaScript共に初心者ではありませんが、 趣味程度の浅い知識しか御座いません。

    • ベストアンサー
    • HTML
  • PCスマホの画面切り替えで領域がうまくとれません

    ＰＣ／スマホ兼用対応のページを作成しており、画面サイズが小さくなった際には横3グリッド(width300px/グリッド)から横2グリッド(width360px/グリッド)に変更するようなページです。 その中で、ＰＣの際にはマウスオーバー時にイメージタイトルがスライドイン／スライドアウトするようにしているのですが、以下のスクリプトで画面サイズが変更するたびに値を取得しているつもりなのですが、一度ＰＣでマウスオーバーを行い、スマホサイズに切り替えると左から300pxのところでイメージタイトルが残ってしまってしまいます。 逆の場合も、animation(left:'●●px'）で指定した場所に移動してくれないのですが、ご教授いただけないでしょうか？ 初めての質問なため、足りない点など多いかと思いますが、よろしくお願いいたします。 <script type="text/javascript"> window.onload = function(){ resizeTextArea(); } window.onresize=function(){ resizeTextArea(); } 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 resizeTextArea(){ var w = getBrowserWidth(); if (w >= 960) { //マスオーバー時に右にスライド $('.slideright').hover(function(){ $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300}); }, function() { $(".cover", this).stop().animate({left:'-300px'},{queue:false,duration:300}); }); //マスオーバー時に左にスライド $('.slideleft').hover(function(){ $(".cover", this).stop().animate({left:'120px'},{queue:false,duration:300}); }, function() { $(".cover", this).stop().animate({left:'300px'},{queue:false,duration:300}); }); }else{ $('.slideleft').hover(function(){ $(".cover", this).stop().animate({left:'180px'},{queue:false,duration:0}); }, function() { $(".cover", this).stop().animate({left:'180px'},{queue:false,duration:0}); }); } } </script>

  • ランダム表示とリンクの貼り付け

    数百の画像を、ランダムにダブらないで表示させるのはできたのですが （画像名は整理しやすい0000.jpg～0100.jpgとしました） <script type="text/javascript"><!-- x=Math.floor(Math.random()*100); x=new String(x); if (x.length==1){ x="000"+x;} else if (x.length==2){ x="00"+x;} else if (x.length==3){ x="0"+x;} RndImg= new Image(); RndImg.src="images/image"+x+".jpg"; NoMem[n]=x;} //↑これって同じ画像が重複しないように。の意味でいいんですか？ function ImgDisp(){ document.images["imgs0"].src=RndImg.src; } window.onload=ImgDisp; //--></script> <body> <img src="*" name="imgs0"> </body> 一つ一つの画像にそれぞれリンクを貼りたいと思います。 どこに何を入れたらいいでしょうか？ それと ランダムにする画像を３つくらい並べたいのですが <img src="*" name="imgs0"> だと１つしかランダムにならずに、 あとの２つは画像が表示されません。 何を変えたらいいでしょうか？ よろしくお願いします。

  • ブログトップにランダムで画像を表示させる方法

    ブログのトップに画像をランダムで表示させたいと思っています。 テンプレートはfc2の共有プラグインのsimple04を使っています。 <script language=”JavaScript”> var images = new Array(); /* 画像URLを表示させたい分だけ書き込むこと */ images[0] = “”; images[1] = “”; images[2] = “”; images[3] = “”; images[4] = “”; images[5] = “”; images[6] = “”; var rnd = Math.floor((Math.random() * 100)) % images.length; document.write(‘<img src=’,images[rnd],’ border=”0″>’); </script> 自分で調べてみてこのタグを使えばいいことはわかったのですが、 HTMLの所に貼るのかCSSのところに貼るのかわかりません。 回答よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する