- 締切済み
画像を指定座標まで移動させたい
こんにちは。 今回ご質問させていただきたいのはＪＳで1枚の画像を指定位置まで移動させるにはどうすればよいかということです。 オンロードで画像がウィンドウの上部登場しそのまま下に少し移動させて止まるという動きをさせたいと思っています。 どなたかお知恵をお貸しください。お願いします。
- milktea_
- お礼率65% (27/41)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- Ujiki
- ベストアンサー率37% (38/101)
はじめまして。よろしくお願いいたします。 ＤｙｎａｍｉｃＤｒｉｖｅ．ｃｏｍ なるサイトから、よく面白そうなJavaScriptを流用させてもらっております。IEだけしか利用できないもの、NSだけにしか利用できないもの、またブラウザーの種類に依存しないものを明確に案内してくれるのは、いいこと(?)だと思います。 http://www.dynamicdrive.com/ です。(^^) その中から、１つ、ご紹介します。 http://www.dynamicdrive.com/dynamicindex11/pathgenerate.htm です。「 pathGenerator 」です。英語ですが、利用は簡単です。 1. ページに移動後、マウスの左ボタンを押しっぱなしで画面を適当になぞって下さい。(^^) 2. そして「 Preview 」を押せば、左上の矩形の「 Sample Layer 」が何度でも再現してくれます。 3. 気に入らなければ「 Reset 」して、1.から繰り返します。 4. 満足したら… 「 Get Source Code 」をクリックすれば、別ウィンドーを表示し、座標値を含んだ JavaScriptスースを自動的に生成してくれます。最初の座標値と、最後の座標値を修正したり、追加したり、画面サイズから計算させるなどすれば、迷走しながら目的地に到着するようなことも楽しめそうです。Arrayの勉強にもなりますしね。(^^); Arrayに対してのXY座標値の埋め込みなんだと気が付けば… 幾何学的な、数学的な、解を自動生成してやれば… 画像の移動を様々な規則正しく(?)動かせますよね。なーんちゃって(^^); ブラウザーに依存しない仕様なので嬉しい(?)ですね。頑張って下さい。
- lmeelm
- ベストアンサー率52% (18/34)
ごめんなさい、JavaScriptではありませんが、HTML+TIMEというものを使用すると簡単に出来ます。 ただし、IE5.5以上に限定します。他ブラウザでは表示されません。 <HTML XMLNS:t="urn:schemas-microsoft-com:time"> <HEAD> <TITLE>HTML+TIME</TITLE> <STYLE type="text/css"> .time{behavior: url(#default#time2);} </STYLE> <?IMPORT namespace="t" implementation="#default#time2"> </HEAD> <BODY> <IMG id="i0" src="abc.gif" style="left:0;top:0;position:absolute;"> <t:animate id="t0" targetElement="i0" attributeName="top" from="0" to="300" begin="0" dur="1" autoReverse="false" /> </BODY></HTML> 下記サイトに大変多くのサンプルがあります。
- 参考URL：
- http://ad.il24.net/~ura/
- howsike
- ベストアンサー率58% (18/31)
こんにちは～ 自分の下手なスクリプトでご回答します！ あくまでもほんの一例として受け止めてくださいませ！ --------------------------------------------------- <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- i = 0 ; //画像の初期トップ位置(ピクセル単位) m_spd = 6 ; //画像の動く距離(ピクセル単位) t_spd = 100 ; //画像の動く早さ(1/1000秒単位) max = 400 ; //画像の終点位置(ピクセル単位) function movesty() { lay01.style.top = i ; if(i >= max) i = max else i += m_spd window.setTimeout("movesty()", t_spd) ; } //--> </SCRIPT> </HEAD> <BODY onload="movesty()"> <DIV id="lay01" style="position:absolute; left:50"> <IMG SRC="bus.jpg"> <DIV> </BODY> </HTML> --------------------------------------------------- 対応ブラウザはＩＥのみということで(苦笑) 画像は<BODY>内の<IMG>タグで指定して下さい！ <DIV>のid属性は変えると動かなくなるので‥‥
関連するQ&A
- 座標の移動指定について教えてください
初歩的な質問で申し訳ありませんが、 ボタン操作によって上下にスクロールするループ画像が作りたいです 見える範囲（ステージ）が縦幅300pxなのに対し、（ムービー クリップに設定した） 縦幅500pxの画像と、押すたびに画像を 20pxずつ上と下に動かすための ▲（上用）▼（下用）２つの ボタンを配置します。 ボタンを操作して画像を初期の座標（たとえばy.100）から 上下に動かし、ステージの上端か下端で 画像が見切れそうな 位置（たとえばy.200、もしくはy.0）にまでついた時に元の 位置（y.100）まで戻り、 ループしてるようなflashが作りたいのです。 onClipEvent (load) { this.my_mc._y = 100; } if (my_mc._y < 0) { my_mc._y = 100; } else if (my_mc._y < 200) { my_mc._y = 100; } ↑のように指定しても思うように動いてくれず、困っております どなたかお力をかしてください…お願いします flash CS3のactionscript2で作業しています
- 締切済み
- Flash
- javascriptを使って画像へ移動
http://album.alexflueras.ro/ このサイトのように、画像をクリックして滑らかに横移動させるにはどうしたらいいでしょう？ ソースを覗いてみて、hscroll.jsを呼び出してマウスウィールさせることは出来たのですが… やはりprototype.jsとprototip.jsが必要なのでしょうか？ だとしたらprototip.jsの方はライセンスが必要なようでDL出来ません； あとstyle.cssも見てみましたが、 下の©2011 flueras.com～と書いてあるところ(footer内)は背景が黒になってますよね？ これはどこで指定してあるんでしょう；？
- ベストアンサー
- JavaScript
- 動的に切り替わる指定座標へ、スムーススクロール
window.scrollTo("0",Y);で、 ウインドウを指定位置に移動させているのですが、 これをスムーススクロール対応するには、 どうすればよいでしょうか？ Yは、指定座標（モニタ上の絶対位置）で、 任意のタイミングで、動的に取得してます。 イメージとしては、 関数みたいなのに、Y座標を渡して、 その都度、スムーススクロールさせるような使い方を想定してます。 jQueryとか、プラグインを使ってもいいですが、 なるべくシンプルに行きたいと思ってます。 また、結果的に、ページ内リンクも、スムーススクロールすることになったとしても別に構いませんが、 やりたいのは、リンクをスムーススクロールすることではなくて、 「動的に、都度切り替わる、Y座標へ、スムーススクロールしたい」ってことです。 難しいようであれば、 厳密なスムーススクロールじゃなくても、 何となくそれっぽく見えれば構いません。
- ベストアンサー
- JavaScript
- UWSCで指定の画像をドラック&ドロップ
同じ作業が大量にあるので UWSCで簡略化させたいと思いますが、書き方初心者なもので 検索して解決しないのでお尋ねします。 わかりにくい説明ですみません。 まず、やりたいことは 画像で 西川・田辺・村山 が並んでいる場合に 山田を西川の上と交換したいと思っています。 山田の文字を工藤の位置のドラッグドロップすれば変わります 工藤の部分の名前・及びその周囲の名前はランダムです /////////////////////////////////////////// ifb CHKIMG("check1.bmp") 指定画像の中央を押しっぱなし マウスを右に移動した位置で離す endif ifb CHKIMG("check2.bmp") 指定画像の中央を押しっぱなし マウスを下に移動した位置で離す endif ifb CHKIMG("check3.bmp") 指定画像の中央を押しっぱなし マウスを左に移動した位置で離す endif 画面右端のバーを押してスクロール ループ /////////////////////////////////////////// 質問１は 山田の選択方法です。 １画面に山田は沢山あるので、指定の列の山田のポイントを取りたいのですが 工藤やその周囲がランダムなので画像どう用意すればいいでしょうか 質問２は ２列目でG_IMG_X, G_IMG_Y だと端なので中央指定にしたいのですが どのような書き方をすればよろしいでしょうか 質問３は ドロップ時に現在地のマウスの位置(G_IMG_X -10, G_IMG_Y) としたいのですが -数値の移動距離は恐らく1pixのことだと思いますが、１回１回試さずに 正確な距離を知る方法はないでしょうか？ 沢山質問してすみません おわかりになる分だけでいいので宜しくお願いします。
- 締切済み
- その他（プログラミング・開発）
- htmlで画像をリンクして指定の位置に指定の大きさで表示させる方法
htmlで画像にリンクさせています。 この場合希望の大きさよりも大きなウインドウが開かれてしまいます。 画像に合わせて（大きさを指定して）ディスプレイ上の 指定する位置に表示させたいのですが可能でしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- ボタンによるムービークリップ移動
flashmx2004／actionscript2.0です。 ボタンにrollOverすると、別の場所にあるムービークリップが所定の位置まで移動する、と言う動きをさせたいと思っています。 ムービークリップがMC1としますと、単純にボタンに MC1._x=0; MC1._y=0; と指定したらその位置に移動はしますが、これのように瞬時に移動ではなく、動きがわかる程度のスピードで動くようにしたいのです。 イメージとしましては画像の上にシャッターのように次の画像が来る形にしたいのです。 フレームをあまり使わず、可能であればボタン1個で動作させたいのですが、どうにも手詰まりです。 ご教授戴ければ幸いです。
- ベストアンサー
- Flash
- スクロールに沿ってjavascriptで背景画像を
現在webサイトを作成しています。ページのメインビジュアルを「.mainVisual」というclassを作成し背景画像を指定して表示しています。 この背景画像を画面スクロールした際に、下に動くように以下のjavascriptを実装しています。 $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('.mainVisual').css('background-position-y', '0 ' + parseInt( +y / 10 ) + 'px'); }); }); この状態で動くのですが、今回新たに背景画像の元々の表示位置を「background-position」で調整したいと考えています。（単純に画像が下に下がるので、事前に画像の位置を上に上げておきたい） cssの記載で位置の調整はできるのですが、スクロールしてjavascriptが実装されると「background-position」の値が0pxになってしまい、背景画像の指定位置が元に戻ってしまいます。 こちら既に指定指定した「background-position」の値を残しつつ、jsでスクロールに併せて要素を動かすにはどのようにすればよいでしょうか。 わかりにく説明と、ひどく初心者の質問で大変に恐縮ですが、どなたかご教授いただけませんでしょうか。 よろしくお願いいたします。
- 締切済み
- JavaScript
- リンク先ページの指定した位置へ移動するには？？
おせわになります。 早速ですが質問させていただきます。 <a>タグを使ってリンク先ページへ移動するようにしています。 質問内容はただリンク先へ移動するのではなく、リンク先ページ内の指定した位置へ移動させるにはどうすれば宜しいでしょうか。 同じページ内で指定位置へ移動する場合は <a href="#samp">リンク元</a> <a name="samp">指定位置</a> で行えることはわかりました。 このやり方を応用してやるのか、はたまた別のやり方があるのか全く検討つきません。。 どなたかご教授のほど宜しくお願い致します（_ _）
- ベストアンサー
- HTML
- wgetで指定したURLの背景画像等の取得方法
wgetを使ってファイルの階層構造を保ったまま、 指定したＵＲＬの関連ファイルだけ保存したいのですが ＣＳＳで指定された背景画像、ＪＳでリンクされてるロールオーバーなどの画像を取得するには コマンドはどう記述したら良いのでしょうか？ 保存したいのは、あくまで指定したＵＲＬを正常に表示する為に使用されてる関連ファイルだけです。 ちなみにＦＬＡＳＨ等で外部ファイル化してるｊｓや画像も取得できる方法があれば教えていただけますでしょうか。
- ベストアンサー
- その他（プログラミング・開発）
- 指定した背景画像を数秒ごとに切り替えるプラグイン
java初心者です。 というか申し訳ありませんが全くわかりません。 しかし、どうしても指定した背景画像を数秒ごとに切り替えなければならなくなり、 下記のサイトで jQueryプラグインをダウンロードしたのですが使い方が全くわかりません。 http://rewish.org/demo/jquery_bg_switcher/ ダウンロードしたファイルの中にあったexample.htmlを見たのですが どこで背景画像を変更したらいいのか分からず、 <title>jQeury.bgSwitcher.js</title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1.4.2");</script> <script src="../jquery.bgSwitcher.js"></script> head内にあるこの文章の意味もわかりません。 下の<script src="../jquery.bgSwitcher.js"></script>はjquery.bgSwitcher.jsの場所を指定しいるということはわかるのですが、なぜ上の２行にはgoolgeがついているのか。 flashを使わず背景画像を変更したいのですが、どなたか使い方が分かる方はいらっしゃいますか。いたら教えていただけたらうれしいです。 また、start、stopなどの機能もついていたのですが、私には必要なく TOPのメイン画像を背景画像に指定し、３、４秒で順番に切り替えたいのです。 （現在未定ですが、もしかしたら5枚ほど画像を切り替えたら最後の１枚で画像をstopさせるかもしれません） ちなみに画像は imgフォルダの中に入っていて main1からmain5の5枚あり、widthが770pxにheightが279pxです。 もし他にもっと簡単なやり方などあれば教えていただけたらうれしいです。 javaのことが全然分からないため至らぬ点が多々あると思いますが、どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
