jqueryで画像を停止し、指定した方向や距離で動かす方法
- jqueryを使用して、画像を一時停止させた後、指定した方向や距離で動かす方法について教えてください。
- 質問のコードを見ると、jqueryを使用してidが「anime」の画像を右に100px移動させ、幅を2500px、高さを200pxに変更するアニメーションが設定されています。しかし、動きの方向や距離を指定することができません。
- 回答としては、animate()メソッドのオプションに直接数値を指定するのではなく、変数を使用して動きを制御する方法があります。具体的には、変数を定義し、その変数を使って方向や距離を制御することで、自由な動きを実現することができます。
- ベストアンサー
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',の部分を方向や数値を変えても左端から右端に移動するだけです。 よろしくお願いします。
- vvv78
- お礼率100% (4/4)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
右の方から左に移動した後、下に移動する(拡大はしない) という動きなら下記のように。 動きを連続する場合はanimateイベントを複数定義しましょう。 <html> <head> </head> <body> <img id="anime" style="position:absolute;left:500px;top:0px" src="ooo"> </body> </html> <script> jQuery(function(){ $('#anime').animate({ left : '0px' },15000).animate({ top : '500px' },15000); }); </script>
関連するQ&A
- jquery uiが動かない
jquery uiが動きません。 何度も見直し、プログラムを書いてもどこがいけないかわかりません。 教えていただけたら幸いです。お願いいたします <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> </head> <body> <div id="box">box</div> <style> #box{ width:100px; height:100px; background:red; } </style> <script> $(function(){ $("#box").draggable( axis: 'x'; ); }); </script> </body> </html>
- ベストアンサー
- JavaScript
- jquery:animate中にイベントを付与
#box{width:100%;height:100%;position:relative;} #idou{width:3000px;height:100%;position:absolute;} #ugoku{position:absolute;top:-300px;right:-1500px;} a{display:block;width:100px;height:100px;right:0;top:100px;} <div id="box"><div id="idou"><img id="ugoku" src="*.gif" width="300" height="300"><a href="">左に移動</a></div></div> ・jQuery(1.7.1） ・mousewheel.jsを使用、var scrollInt=100;$('html').mousewheel(function(event,mov){$("html,body").css("left","-="+(scrollInt*mov)+"px");});で通常は横移動するソース。 ・$("a").click(function(){$("#idou").animate({left:0},"slow");});でリンクをクリックすると左に戻す。この時の#ugokuが問題。 ・移動の角度は50度で設定、#idouのleftが-1000～-1500pxの間というような特定の間に#ugokuの画像を画面の右上から左下にanimateで流したい。 最後の項目をやろうとして完全に行き詰ってしまって困っています。 どちらかというと数学の問題かもしれません。 animate動作中に、#idouのleftが～pxになったときを拾うようなイベントは存在するのでしょうか？その他良いやり方やURLあれば教えて頂けると幸いです。 よろしくご教授ください。
- ベストアンサー
- JavaScript
- jQuery UIのdraggableについて
こちらでは初めて質問させていただきます。 よろしくお願いします。 現在、jQuery UI の draggable を使用してWebブラウザ上での ドラッグ＆ドロップを実装中なのですが、 期待通りに動作させることが出来ません。 <script></script> …… (1) <html> <head> <script type="text/javascript" src="jQuery/jquery-1.3.2.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.core.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.draggable.js"></script> <style> #a { height:100px; width:300px; overflow:scroll; border:solid 1px Black; } #b { width:60px; height:40px; background:lime; position:absolute; top:10px; left:50px } #c { width:60px; height:40px; background:lime; position:absolute; top:60px; left:50px } </style> <script type="text/javascript"> $j = jQuery.noConflict(); $j(function($) { $('#b').draggable(); }); $j(function($) { $('#c').draggable(); }); </script> </head> <body> <div id="a"> <span id="b">Drag Element1</span> <span id="c">Drag Element2</span> </div> </body> </html> ドラッグ対象は複数存在するため、ドラッグ対象を<div>エリア内で スクロール（必須です）させています。 ドラッグ対象を<div>エリア外にドラッグしたいのですが、 <div>エリア内しかドラッグできません。 ((1)の記述がないと、ドラッグ対象が<div>エリア内でスクロール しませんでした。？？？) どなたか、よきアドバイスをお願いします。
- 締切済み
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- jQueryでのアニメーションで質問です。
ブラウザの右端から左端へ要素をスーッと動かして、 左端まで行ったら、右端から再スタートというのをループでしたいです。 とりあえず下記のようなスクリプトで可能なようですが、 これだとブラウザサイズを変えた際に、リロードしないとウインドウ幅を再取得できないようで、途中でブラウザサイズを広げると左端まで行かず、途中で移動が止まり、右端から再スタートというふうになってしまいます。 これに何を加えれば途中でブラウザサイズを変えてもちゃんと右端まで移動させられるでしょうか？ よろしくお願いします。 $(function () { setTimeout('rect()'); //アニメーションを実行 }); function rect() { var w = $(window).width(); $("#rect").animate({ left: w //要素を動かす位置 }, 3000).animate({ left: "-50px" //要素を戻す位置 }, 0) setTimeout("rect()", 3000);//アニメーションを繰り返す間隔 }
- 締切済み
- JavaScript
- jQueryで質問です。
jQueryで質問です。 オブジェクトA、Bがあるとします。 Aをドラッグすると、mousedownかdragstartの段階で要素がBに置き換わってドラッグさせるような動きは可能でしょうか。 作成中のソースを記載します。 <html> <head> <title>test</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="./ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="./ui/jquery.ui.droppable.js"></script> <script type="text/javascript"> $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1 .mousedown( function(){ obj1.replaceWith(obj2); obj2.draggable(); } ); }); </script> </head> <body> <div style="width:200px; height:100px; background: #cccccc;" id="box">A</div> </body> </html> これだと、Aのドラッグを一度解除して、Bをドラッグすると上手くいきますが、1回のモーションでBをドラッグさせたいのです。 宜しくお願いします。
- ベストアンサー
- 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のdraggable縦書き出来ますか？
プログラム自体初めてなのですが、仕事の関係で作らないといけない事になりました。 目的は、「文字が書かれた札をドラッグで色々と動かして操作したいです。」 jQueryのdraggableを使用して札のようなものをマウスのドラッグで色々と動かしたいと考え 作ってみましたが、札の中がどうしても横書きになってしまいます。 「札の中を縦書きにする方法を教えて頂けないでしょうか？」 基本的な考え方が間違っているかもしれませんが出来るのであればどうか教えてほしいです。 とりあえずここまでは書いています。 質問が分かりづらく申し訳ありません。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery- 1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <style> #draggable01 { width: 25px; height: 500px; padding: 0.5em; } #draggable02 { width: 25px; height: 350px; padding: 0.5em; } </style> <script> $(function() { $( "#draggable01" ).draggable(); }); </script> <script> $(function() { $( "#draggable02" ).draggable(); }); </script> </head> <body> <div> <div id="draggable01" class="ui-widget-content"> <p>あいうえお</p></div> <div id="draggable02" class="ui-widget-content"> <p>かきくけこ</p></div> </div> </body></html>
- ベストアンサー
- JavaScript
- CSSで左に画像、右にテキストを並べたい。
CSSで左に画像を置いて右にテキストを同じ列で並べたいのです。 （●=画像 ▲=テキスト） 現在の表示は ●▲ となっているのですが、これを ● ▲ と表示して画像は左端、テキストは右端にしたいのです。<td>で区切ればできると思うのですが、これをCSSだけで何とかできないでしょうか？ 色々試したのですが、どうしても下のように改行してしまいます。 ● ▲ ソースは以下です。 <table border="0" cellpadding="0" cellspacing="0" width="750" > <tr> <td colspan="2" id="head"><img src="img/777.gif" border="0">おはよう</td> </tr> </table> 外部CSS #head{background-color:#009900 width:750px; height:60px; margin-right:5px} どなたか宜しくお願い致します。
- ベストアンサー
- HTML
- ｊQuery
http://ascii.jp/elem/000/000/498/498710/ 上記サイトの6page目をみて、サイトに手順のあるｊQuerｙアコーディオンを作成しようとおもったのですが、クリックすると２番目と3番目のｄｄの部分が表示されるのですが、私のは最初からｄｄの画像が 3枚とも表示されています。 私の作成したサイトのｈｔｍｌ、ｃｓｓの記述は以下です。 また、ｊｓフォルダにはjquery.animate-colors-min と jquery.easying.1.3と jquery.skitterと jquery-1.6.3.minが入っていて、jqueryskitterをダウンロードしたときのものです。それが間違いでしょうか？ 上記サイトでは他のバージョンを使っているので、それをダウンロードしないとダメなのでしょうか？ <script>の記述が間違っているのでしょうか？ 何卒ご教授お願い致します。 ○ｈｔｍｌ部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>メニューページ</title> <link href="all.css" rel="stylesheet" type="text/css" media="all" /> <script type="test/javascript" src="js/jquery-1.6.3.min.js"></script> $(function(){ $("dd:not(:first)").css("display","none"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } }); }); </head> <body> <dl> <dt>course</dt> <dd> <p><img src="image/menu1_03.jpg" width="728" height="515" /></p> </dd> <dt>a la calt</dt> <dd> <p><img src="image/menu2_03.jpg" width="763" height="560" /></p> </dd> <dt>waine</dt> <dd> <p><img src="image/manu3_03.jpg" width="763" height="561" /></p> </dd> </dl> </body> </html> ○CSS部分*他のhtmlページともリンクしているため、下記以外にも書いてあります *{ margin:0; padding:0; } a imag{ border:none; } dl{ width:763px; margin:50px auto; } dl dt{ background:#7CADB6; border-bottom:1px solid #FFFFFF; cursor:pointer; } dl dd{ border:1px solid #7CADB6; border-top:none; height:561px; }
- ベストアンサー
- JavaScript
お礼
回答ありがとうございました。 教えてもらった通りやったら、うまくいきました。