JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを配置する方法
- JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを画像右下に配置する方法について質問があります。
- firefox(3.6.3)ではmouseupによるmousemoveのunbindがうまく機能せず、mousemoveが維持される問題があります。
- IE8やchrom、operaでは期待通りに動作しますが、時々chromでfirefoxと同様の不具合が発生します。修正方法を教えてください。
- ベストアンサー
JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを画像右
JQueryを使用して、画像をドラッグで拡大・縮小できるボタンを画像右下に配置しようと考えています。 以下のようなコードを作成したのですが、firefox(3.6.3)だとmouseupによるmousemoveのunbindがうまくいかず、mousemoveが維持されます。 IE8、chrom、operaでは考えたとおりの動きをしますが、ときたまchromでfirefoxと同様の不具合がおきます。 どのようにコードを修正すればよいでしょうか？ ------------------------ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> <!-- div#frame1{ position : absolute; height : 360px; width : 240px; top : 0; left : 0; border : 5px solid #000FFF; } div#frame1 img#handle{ position : absolute; bottom : 0; right : 0; border : 5px solid #FFF000; } //--> </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> <!-- $(function(){ $("img#handle").mousedown(function(e){ $("#frame1") .data("mdownX" , e.clientX) .data("mdownY" , e.clientY); $(document).mousemove(function(e){ var width = parseInt($("div#frame1").css("width"),10); var height = parseInt($("div#frame1").css("height"),10); $("div#frame1").css({ width : width + (e.pageX - $("#frame1").data("mdownX")) + "px", height : height + (e.pageY - $("#frame1").data("mdownY")) + "px" }); $("#frame1") .data("mdownX" , e.pageX) .data("mdownY" , e.pageY); }); }); $(document).mouseup(function(){ $(document).unbind("mousemove"); }); }); //--> </script> <title>zoom</title> </head> <body> <div id="frame1"> <img id="handle" src="image.bmp" alt="画像"/> </div> </body> </html>
- s_h_i_b_a
- お礼率80% (36/45)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
確認はIE8とFirefox3.6.3でしかやってないです <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> div#frame1{ position : absolute; height : 360px; width : 240px; top : 0; left : 0; border : 5px solid #000FFF; } div#frame1 img#handle{ position : absolute; bottom : 0; right : 0; border : 5px solid #FFF000; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#frame1").data({mdownX:-1,mdownY:-1});//-1で初期化(mousemoveでの判定も兼ねる) $("img#handle").mousedown(function(e){ $("#frame1").data({mdownX:e.pageX,mdownY:e.pageY}); $(this).css('cursor','move'); return false; // falseを返してイベントバブルを停止 }); $(document).mouseup(function(){ $('img#handle').css('cursor',''); $("#frame1").data({mdownX:-1,mdownY:-1});//unbindはしない。位置を-1にリセット }); $(document).mousemove(function(e){ if($("#frame1").data('mdownX') < 0) return; var width = $("div#frame1").width(); var height = $("div#frame1").height(); $("div#frame1") .width(width + parseInt(e.pageX - $("#frame1").data("mdownX"))) .height(height + parseInt(e.pageY - $("#frame1").data("mdownY"))); $("#frame1").data({mdownX:e.pageX,mdownY:e.pageY}); }); }); </script> <title>zoom</title> </head> <body> <div id="frame1"> <img id="handle" src="image.bmp" alt="画像"/> </div> </body> </html>
関連するQ&A
- 動的に変数だけを切り替える
<script> (function($) { $.ipop001 = function() { var wx, wy; // ウインドウの左上座標 // ウインドウの座標を画面中央にする。 wx = $(document).scrollLeft() + ($(window).width() - $('.ipop').outerWidth()) / 2; if (wx < 0) wx = 0; wy = $(document).scrollTop() + ($(window).height() - $('.ipop').outerHeight()) / 2; if (wy < 0) wy = 0; // ポップアップウインドウを表示する。 $('.ipop').css({top: wy, left: wx}).fadeIn(100); // 閉じるボタンを押したとき $('.ipop_close').click(function() {$('.ipop').fadeOut(100);}); // タイトルバーをドラッグしたとき $('.ipop_title').mousedown(function(e) { var mx = e.pageX; var my = e.pageY; $(document).on('mousemove.ipop', function(e) { wx += e.pageX - mx; wy += e.pageY - my; $('.ipop').css({top: wy, left: wx}); mx = e.pageX; my = e.pageY; return false; }).one('mouseup', function(e) { $(document).off('mousemove.ipop'); }); return false; }); } })(jQuery); (function($) { $.test = function() { var wx, wy; // ウインドウの左上座標 // ウインドウの座標を画面中央にする。 wx = $(document).scrollLeft() + ($(window).width() - $('.ipop').outerWidth()) / 2; if (wx < 0) wx = 0; wy = $(document).scrollTop() + ($(window).height() - $('.ipop').outerHeight()) / 2; if (wy < 0) wy = 0; // ポップアップウインドウを表示する。 $('.ipop').css({top: wy, left: wx}).fadeIn(100); // 閉じるボタンを押したとき $('.ipop_close').click(function() {$('.ipop').fadeOut(100);}); // タイトルバーをドラッグしたとき $('.ipop_title').mousedown(function(e) { var mx = e.pageX; var my = e.pageY; $(document).on('mousemove.ipop', function(e) { wx += e.pageX - mx; wy += e.pageY - my; $('.ipop').css({top: wy, left: wx}); mx = e.pageX; my = e.pageY; return false; }).one('mouseup', function(e) { $(document).off('mousemove.ipop'); }); return false; }); } })(jQuery); $(function() { $("a").click(function() { eval("$."+this.id+"();"); var text = this.id; $("#text").text(text); }); }); </script> 『$.ipop001 = function() { も『$.test = function() {』以降の中身一緒なのですが、クリックした時に変数の部分だけを切り替える方法はないのでしょうか。 仮にリンクが100個あったら変数が違う＆中身が一緒のfunction()を100個文書かなければいけないのでご教示お願いします。
- 締切済み
- JavaScript
- ｊQueryでシンプルドラッグドロップがまずい
Javascript,jQuery初心者です。主にWINDOWS7、GoogleChrome使用です。 ｊQueryでシンプルなドラッグドロップ自作をやってみました。 <!DOCTYPE html> <html> <head> <meta carset="utf-8"> <script src="js/jquery-1.11.0.min.js"></script> <style> #chr{ position:absolute; left:100px; top:100px; } </style> <body> <div id="msg"></div> <div id="chr"> <img src="parts/usl470.jpg"> </div> <script> dragflg=false; $("#chr").mousedown(function(){ dragflg=true; $("#msg").html("on")}) .mouseup(function(){ dragflg=false; $("#msg").html("up")}); $(window).mousemove(function(e){ if(dragflg) { $("#chr").css("left",e.clientX-20+"px") .css("top",e.clientY-20+"px"); } }); </script> </body> </head> </html> mousedown、mouseupの検出を確認するために、隅にon、upと表示するようにしてあります。 思惑通り、押すとon、離すとupが表示されますが、ドラッグドロップした後は、離している状態のupになってくれず、押さずに動かしても#chrはついてきてしまいます。まともなドラッグドロップと違い、もう１回クリックでやっと離してくれる、という具合です。 #chr上でボタンを離している時はそれを検出するんじゃないのか？と思ってしまうのですが、ついでに、ドラッグ動作自体も、移動禁止マークが出てちょっとおかしいし、詳しい人はどうやってこういう症状を回避してドラッグドロップの動作を実現しているのでしょうか？ ネットで見て回って参考にしようにも、短くてシンプルなjQueryのドラッグドロップのサンプルが見つからず、ここで何が間違いなのか意見を仰ごうと思ったものです。手っ取り早くｊQueryUIを導入すれば、やりたいこと自体は出来るんでしょうけど、ボタン離していても検出できないのが何なのかは、すっきりしておきたいと思いました。どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- Jqueryで画像タイトル表示させる
ギャラリーを作っていいるのですが、それぞれの画像ごとに説明文やタイトルを表示させたいのです。 サムネイルクリック後に大きな画像を、そのしたに説明文・タイトルをそれぞれ同時に表示させる方法を教えてください。 以下がソースになります。 (jQueryプラグインでサムネイルにフェードをかけています) ■HTML■ <!DOCTYPE html> <html> <head> <title>フォト ギャラリー サンプル #01</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> <script type="text/javascript"> $(function(){ $('a img').hover( function(){ $(this).fadeTo(200, 0.6); }, function(){ $(this).fadeTo(200, 1.0); } ); }); </script> </head> <body> <div id="wrapper"> <div class="image"> <div id="n1"><img src="big_01.jpg"title="aaaaaaaaaa/></div> <div id="n2"><img src="big_02.jpg" title="aaaaaaaaaa"/></div> </div> <div id="thum"> <ul> <li><a href="#n1" class="thum"><img src="thum_01.png" /></a></li> <li><a href="#n1" class="thum"><img src="thum_01.png" /></a></li> </ul> </div> </div><!--wrapper--> </body> </html> ■CSS■ #wrapper{ width:840px; border:solid #F00 1px; margin: 0 auto; padding: 0 40px; } .image { overflow: hidden; margin-top: 16px; width: 300px; height: 474px; border: 1px solid #ddd; float:left; } #thum{ margin-left: 310px; height:474px; } #thum img { border: #eee 2px solid; height:100px; width:100px; padding: 5px; margin-left: 7.5px; margin-bottom: 7px; float:left; } #thum li{ display:inline; list-style:none; } よろしくお願いします。
- 締切済み
- CSS
- jquery bindがとまらない
jquery の bindを使い、以下のサイトを参考にしながら、実装を試みているのですが、unbindしてもとまらなくなってしまいました。 mousedown、mousemove、mouseup を使い、mousedownした時点のx座標と、mousemoveしている間のx座標の差を取り、mouseup時に移動距離を表示するというものをとりあえず作りたいのですが、mousemoveが永遠続いてしまい、mouseupしてもとまりません。 $('#main_body').mousedown(function(e){ now_x = e.pageX; alert(now_x); $(document).mousemove(function(e){ now_x2 = e.pageX; alert(now_x2); }) }).mouseup(function(){ alert("bbbb"); $(document).unbind("mousemove"); }); これですと、now_x2がずっと出続けてしまいます。。。 どうか、お力をお貸しください。 よろしくお願い致します。 参考サイト： http://weble.org/2011/03/08/jquery-floatingbox
- ベストアンサー
- JavaScript
- jqueryで、後から追加した画像もドラッグ&ドロップできるようにした
jqueryで、後から追加した画像もドラッグ&ドロップできるようにしたい 以下のようにして、画像をドラッグ&ドロップできるようにしています そこに、新たに画像をアップロードして、その画像もドラッグできるようにするところで詰まってしまいました アップロードする時に画面遷移を起こしたくなかったので、インラインフレームを使っています upload.phpでアップロードされた画像を取得して、divタグのクラス名を指定したりしてappendChildで親フレームに挿入 しかし、画像が表示されはするのですがドラッグしようとしても何も起こらない状態です Firebugでも見てみると、元の画像は <div class="dragArea ui-draggable"><img src="./img0.jpg" width="100" height="100"></div> となっていますが、アップロードした画像(新規追加した要素)は、 <div id="adddragfile"><div class="dragArea"><img src="././tmp/newimg.jpg" width="100" height="100"></div></div> となっていて、ドラッグ属性が付いていないように思えます よろしくお願いします /* include.php */ //ドラッグ可能な画像 <div class='dragArea'><img src='./img0.jpg' width='100' height='100'></div> //ここにタグを追加していく <div id='adddragfile'></div> //ドロップ先となる画像 <div class='dropArea'><img src='./img1.jpg' width='300' height='300'></div> <div class='dropArea'><img src='./img2.jpg' width='300' height='300'></div> //ファイルのアップロード <iframe title='upload_frame' name="upload_frame" style="display:none"></iframe> <form action="./upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="max_file_size" value="1000000"> <input type="file" name="upload_image"> <input type="submit" value="画像アップロード"> </form> /* jqueryファイル */ $(function(){ $(".dragArea").draggable({ cursor:'move', helper:'clone' }); $(".dropArea").droppable({ drop:function(e,ui){ alert("ドロップされました"); } }); }); /* upload.php */ <?php $upload_dir = './tmp/'; $filename = $_FILES['upload_image']['name']; move_uploaded_file($_FILES['upload_image']['tmp_name'], $upload_dir.$filename); ?> <script type="text/javasscript"> //親フレームのオブジェクトを取得 var container = parent.document.getElementById('adddragfile'); //要素を作成していく div = parent.document.createElement('div'); div.className = "dragArea"; image = parent.document.createElement('img'); image.src = './<?php print($upload_dir.$filename);?>'; image.width = "100"; image.height = "100"; container.appendChild(div); div.appendChild(image); </script>
- ベストアンサー
- JavaScript
- CSSでの画像の自動縮小について
あるホームページを作成しているのですが、ブラウザを縮小した時、画像を自動で縮小したいのですがうまくいきません。 テーブルのレイアウトを崩したくないので、幅は固定したまま、かつ画像はブラウザサイズによって自動縮小にするようにしたいのですが、どうやってもうまくいきません。 ソースコードは下の通りです。 やはり、フレームレイアウト（waku）と、テーブルの幅を可変（パーセント表示）にしないと、画像の伸縮は難しいのでしょうか。 ＊＊＊＊ HTML部分（CSSは外部） ＊＊＊＊＊ <body> <div id="waku"> <div id="a"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> <tr> <td> <div id="b"> 画像の説明 <img src="01.jpg"> </div> </td> </tr> </table> </div> <div id="c"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> </table> </div> </div> </body> ＊＊＊＊ style.css(CSS部分) ＊＊＊＊＊ #waku { width:900px; border: 1px solid #000; } #a { width:800px; } #b img { max-width: 600px important!; width: 100% important!; max-height: 300px important!; height: 100% important!; } #c { width:800px; }
- ベストアンサー
- HTML
- jQueryでappleっぽい画像ギャラリー設置したいです
http://www.skuare.net/test/jAppleGal.htmlで紹介されていた画像ギャラリーを私のホームページにも組み込みたいと思っているのですが、CSS・JAVAを最近本を買ったりして勉強しはじめた初心者なだけに、紹介されている設置方法だけでは理解できなく質問させていただきました。 (1)とりあえずjQueryからjquery.jsをダウンロードはしましたが、こjquery.jsはどこにどうすればいいのでしょうか？ (2) <div id="main"> <div id="gallery"> <div id="slides"> <div class="slide"><img src="画像パス1" width="920" height="400" /></div> <div class="slide"><img src="画像パス2" width="920" height="400" /></div> <div class="slide"><img src="画像パス3" width="920" height="400" /></div> <!-- 画像にはwidthとheightを指定します --> </div> <div id="menu"> <ul> <li class="fbar"> </li> //区切り線用 <li class="menuItem"><a href=""><img src="サムネイル画像パス1" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス2" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス3" /></a></li> </ul> </div> </div> </div> このコードはhtmlのheadに組み込むのでしょうか？それともbodyでしょうか？ (3) 次にCSSを記述します。 特に難しい部分はないので、cssを見ていただくとして・・・ とありますが、リンク先のcssはいじらなくてもそのまま使用すればいいのでしょうか？ 最後に、jQueryを記述すれば完成です。 $(document).ready(function(){ var totWidth=0; var positions = new Array(); $('#slides .slide').each(function(i){ positions[i]= totWidth; totWidth += $(this).width(); if(!$(this).width()) { alert("Please, fill in width & height for all your images!"); return false; } }); $('#slides').width(totWidth); $('#menu ul li a').click(function(e){ $('li.menuItem').removeClass('act').addClass('inact'); $(this).parent().addClass('act'); var pos = $(this).parent().prevAll('.menuItem').length; $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450); e.preventDefault(); }); $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact'); }); とありますが、これはどこに組み込めばいいのでしょうか？また何も触らなくてもいいのでしょうか？ 他にも分からないところだらけなので、立て続けに質問させていただくと思いますが、お手数おかけしますが力を貸してください。 よろしく御願いいたします。
- ベストアンサー
- JavaScript
- jqueryで画像を ↓ 停止 ← こういう風に動
jqueryで画像を ↓ 停止 ←← 画像をこういう風に動かしたいのですが方向と距離が指示できません。 <html> <head> </head> <body> <img id="anime" src="ooo"> </body> </html> <script> jQuery(function(){ $('#anime').animate({ right : '100', width : '2500px', height : '200px' },15000); }); </script> right : '100',の部分を方向や数値を変えても左端から右端に移動するだけです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jqueryで画像切り替え
この場をお借りして教えて頂ければ幸いです。 jqueryについて、今現在添付画像のようなサムネイルをマウスオーバーしますと、 メイン画像が切り替わるようなものをｊjqueryを使用して制作しました。 ここから、setIntervalを使用して画像が何もしなければ勝手に切り替わるように、 またマウスオーバーをしている際は切り替わらないように、そしてマウスアウトしたら そこの画像から順にsetIntervalが開始されるようにしたいと思っております。 そこの作業が出来ず困っておりまして、是非ともお教え頂ければと思います。 今現在のhtml , css , jsの方は記載しておきます。※reset.cssは除きます。 <body> <div id="wrap"> <div id="sec1"> <div id="photoBox"> <ul id="photo"> <li><img src="img/plan1.jpg" alt="食1" /></li> <li><img src="img/plan2.jpg" alt="食2" /></li> <li><img src="img/plan3.jpg" alt="食3" /></li> </ul> <ul id="thumb"> <li class="first"><img src="img/plan1_s.jpg" alt="" /></li> <li><img src="img/plan2_s.jpg" alt="" /></li> <li><img src="img/plan3_s.jpg" alt="" /></li> </ul> </div> </div> </div> </body> -------------------------------------------------------------------- div#wrap{ width:394px; margin:0 auto; } div#photoBox{ width:394px; height:391px; padding:40px 0; border-bottom:1px solid #CCC; } div#photoBox ul#photo{ width:394px; height:295px; padding-bottom:5px; position:relative; } div#photoBox ul#photo li{ width:394px; height:295px; display:block; position:absolute; top:0; left:0; } div#photoBox ul#thumb{ width:394px; height:91x; position:relative; } div#photoBox ul#thumb li{ float:left; padding-left:5px; } div#photoBox ul#thumb li.first{ padding-left:0; } --------------------------------------------------------- (function(){ var photo = $('#photo').find('li'); var thumb = $('#thumb').find('li'); photo.hide().eq(0).show(); thumb.hover(function(){ $(this).stop().fadeTo('fast', 0.6); photo.stop().fadeTo('fast', 0) .eq($(this).index()) .stop().fadeTo('fast', 1); }, function(){ $(this).stop().fadeTo('fast', 1); }); })
- ベストアンサー
- JavaScript
- jQueryを使用してのメガメニューの記述
色々試してみたのですが、どうしてもわからず、 どうかお知恵をおかしください。 宜しくお願いいたします。 こちらの紹介サイトを参考に、メガメニューを作成しております。↓ http://codesign.verse.jp/jquery/2009/08/megamenu.html メガメニューボタンにマウスオーバーしたときに、 DIVに指定しているmm-div内のものが表示されるよう指定されているのですが、 そのメニューの中でいくつかmm-divのサイズを変更したく、 それに伴いjQueryで表示させる位置の指定を複数記述したいのですが、 jQueryを勉強不足のため、どうしてもうまくいきません。 mm-divはCSSでサイズを記述しているので、 別途指定するものとして新しいDIVに指定するタグとして mm-div2を準備しましたが、１つに連動してしまいます。 説明べたで申し訳ありませんが、 mm-divとmm-div2それぞれに別の位置が指定できる記述に仕方を教えてください。 $(function(){ var target=$("div#megamenu"); var tli=$("ul#mm-ul > li.mm-li"); var tdi=$("div.mm-div",tli); /* if($.browser.msie && ($.browser.version<8)){ var th=; }else{ var th=0; } */ tli.hover( function(){ $("*:animated",tdi).hide(); $(this).animated(); }, function(){ tdi.hide(); } ); $.fn.animated=function(){ var posx=$(this).offset().left+tdi.width(); var posbase=tli.offset().left+target.width(); /*地味に計算するための場所orz $("p#showpos").text(posx); $("p#winwidth").text(posbase); */ tdi.hide(); if(posx>posbase){ $(this).children() .css("left",-posx+target.width()) .css("top","25px") .fadeIn("fast"); }else{ $(this).children() .css("left","5px") .css("top","25px") .fadeIn("fast"); } return $(this); } });
- ベストアンサー
- JavaScript
お礼
steel_grayさん 有難うございます。 chromeとoperaでも問題ありませんでしたでした。 unbindではなく、初期化して条件分岐で解決するわけですね。 JavaやPHPでもよく使う手なのに、unbindにとらわれて全く気がつきませんでした。 まだまだ勉強が必要ですね。 どうも有難うございました。