- 締切済み
JQueryで画像の上で文字を動かす
JQueryで画像の上で文字を動かすにはどうすればいいですか？ Flashのように、画像の上で文字現れたり移動したりしたいんですが。
- ir85i53
- お礼率0% (0/19)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
動かし方にもよりますが、単純に移動する程度ならそれほど難しくありません。 自由な位置にいろいろ動かしたいとなると、No1様の回答のようになるかも。 ＞画像の上で文字を動かすにはどうすればいいですか？ 画像を背景画像にでもしておけばわかりやすいかも知れませんが、とりあえず画像の上ということでごく簡単なサンプルを。 （画像をクリックすると、文字が移動します） あとはご自由に。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- #box { position:relative; overflow:hidden; } #box img { width:600px; height:300px; } #box div { color:#f00; font-weight:bold; position:absolute; top:-30px; left:0; } //--> </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> <!-- $(function(){ var cnt = 0, pos = [[500, 250], [400, 20], [30, 200], [100, 10]]; $("#box img").click(function(){ $("#box div").animate({ left: pos[cnt][0] + "px", top : pos[cnt][1] + "px" }, 1500); cnt = ++cnt % pos.length; }); }); //--> </script> </head> <body> <div id="box"> <img src="img/photo01.jpg" alt="base_image"> <div>文字列</div> </div> </body> </html>
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 jQueryでFlashのようなアニメーションを作るにはゴリゴリにプログラムを組む必要があります。 フェードインやフェードイン、簡単なアニメーションなんかは準備されたりしていますが、この位置からこの位置まで文字をスクロールさせるとかここまで動かしたらこっちに動かすなんかは自分で組み上げるしかありません。 作り方としては画像の範囲で絶対指定で座標を設定し、x座標(またはy座標)を加算もしくは減算するようなロジックを組めば横や縦方向に移動します。 現れたりはfadeIn()を利用するとフワーっと現れたりします。 それらを組み合わせていってアニメーションを作り上げる感じでしょうか。 抽象的な質問ですので抽象的にしか回答出来ませんでした。申し訳ございません。
