A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
動かし方にもよりますが、単純に移動する程度ならそれほど難しくありません。
自由な位置にいろいろ動かしたいとなると、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. …
<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>
No.1
- 回答日時:
こんにちは。
jQueryでFlashのようなアニメーションを作るにはゴリゴリにプログラムを組む必要があります。
フェードインやフェードイン、簡単なアニメーションなんかは準備されたりしていますが、この位置からこの位置まで文字をスクロールさせるとかここまで動かしたらこっちに動かすなんかは自分で組み上げるしかありません。
作り方としては画像の範囲で絶対指定で座標を設定し、x座標(またはy座標)を加算もしくは減算するようなロジックを組めば横や縦方向に移動します。
現れたりはfadeIn()を利用するとフワーっと現れたりします。
それらを組み合わせていってアニメーションを作り上げる感じでしょうか。
抽象的な質問ですので抽象的にしか回答出来ませんでした。申し訳ございません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- Evernote Evernote(エバーノート)の文字化け 1 2022/04/05 19:30
- WordPress(ワードプレス) ワードプレスで、左寄せ画像と文字を横並びにせず、画像の下に文字を表示される方法を教えてください 1 2022/04/24 11:06
- Word(ワード) Wordで行間が勝手に空いてしまう 6 2023/01/09 06:03
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- HTML・CSS 要素の幅をいろんな写真の幅に合わせたい。 1 2022/07/25 20:11
- SSL・HTTPS iiyama ProLite XUB2390HSの起動について 2 2023/04/16 23:05
- 軍事学 右端の飛行機は何? 2 2022/08/06 12:19
- 写真 私が撮った別の写真に、下の画像の「LEON」の文字をそっくりそのまま貼り付けるにはどうすれば良いです 2 2022/10/28 11:42
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
ボタンを押すたびに交互に切り...
-
jQueryでのドラッグアンドドロ...
-
「画像クリックで音声再生」を ...
-
このコードは問題ないでしょうか。
-
デフォルト非表示にしたい。【t...
-
パララックスについて 上下に...
-
lightbox風のモーダルウィンド...
-
Javascript初心者|jQueryの.va...
-
画像の表示位置
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き
-
textareaに画像を表示したい
-
Javascriptで画像を水面のよう...
-
JavaScriptで変更した属性の元...
-
c++std::string型をTCHARに変換...
-
createElementで作成した要素を...
-
ダイアログから画像ファイルは...
-
画像が表示でnull; this.src
-
複数画像のランダム複数表示(...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
-
Javascript初心者|jQueryの.va...
-
画像マウスオーバーで、checkb...
-
アップロードファイルの種類に...
-
複数bxsliderをタブで切り替え...
-
JavaScriptでの画像切り替えを...
-
サムネイルにカーソルを合わせ...
-
時間差で画像を動作させたいjav...
-
マウスオーバーにて画像に虫眼...
-
「画像クリックで音声再生」を ...
-
JavaScriptでクレイアニメ。ち...
-
クリックでクリッカブルマップ...
-
JQueryでオープニングアニメー...
-
交互に入れ替わる画像を複数配置
-
JavaScript/CANVASでの画像読込...
-
VBAでIEを動かす場合、下記の①...
おすすめ情報