JQueryで画像の上で文字を動かす

締切済

質問者：ir85i53
質問日時：2012/04/07 13:51
回答数：2件

JQueryで画像の上で文字を動かすにはどうすればいいですか？
Flashのように、画像の上で文字現れたり移動したりしたいんですが。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2012/04/09 20:01

動かし方にもよりますが、単純に移動する程度ならそれほど難しくありません。

自由な位置にいろいろ動かしたいとなると、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">

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7. …
<script type="text/javascript">

</script>
</head>
<body>

<div id="box">
<img src="img/photo01.jpg" alt="base_image">
<div>文字列</div>
</div>

</body>
</html>

- 0
- 件

通報する

No.1

回答者： LancerVII
回答日時：2012/04/08 00:38

こんにちは。

jQueryでFlashのようなアニメーションを作るにはゴリゴリにプログラムを組む必要があります。
フェードインやフェードイン、簡単なアニメーションなんかは準備されたりしていますが、この位置からこの位置まで文字をスクロールさせるとかここまで動かしたらこっちに動かすなんかは自分で組み上げるしかありません。

作り方としては画像の範囲で絶対指定で座標を設定し、x座標(またはy座標)を加算もしくは減算するようなロジックを組めば横や縦方向に移動します。
現れたりはfadeIn()を利用するとフワーっと現れたりします。

それらを組み合わせていってアニメーションを作り上げる感じでしょうか。

抽象的な質問ですので抽象的にしか回答出来ませんでした。申し訳ございません。