マウスカーソルに合わせて画像が移動するjavascriptで困っています。
マウスカーソルに合わせて画像が移動するソースコードを書いたのですが、
マウスカーソルの動きについていけず、画像がワープ(?)してしまいます。
解決策が分かる方がいらっしゃいましたら、ご指摘願います。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE></TITLE>
<SCRIPT>
<!--
function move(event){
img.style.left=event.x;
img.style.top=event.y;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<IMG src="hoge.png" name="img" style="position:absolute;" >
<div onmousemove="move(event);"
style="width:500px; height:500px; background-color:#cccccc;"></div>
</BODY>
</HTML>
No.1ベストアンサー
- 回答日時:
単純にimgの上にマウスが移動するとイベントが発生しなくなるからでは?
参考例としてこんな感じでは?
(IE7、8では取得の方法が変わっているかも…)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//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">
div.box { width:500px; height:500px; background-color: #ddd; }
#img0 { position:absolute; }
</style>
</head>
<body>
<div class="box" onmousemove="move(event)">
<img src="A.jpg" id="img0">
</div>
<script type="text/javascript">
<!--
var styl = document.getElementById("img0").style;
function move(evt) {
var x, y;
/*@cc_on @if(@_jscript)
x = evt.x + document.body.scrollLeft;
y = evt.y + document.body.scrollTop
@else*/
x = evt.pageX, y = evt.pageY;
/*@end @*/
styl.left = x + 'px';
styl.top = y + 'px';
}
//-->
</script>
</body>
</html>
回答ありがとうございます。
firefoxで起動を確認したところ、スムーズに画像が移動しました。
IE8で起動を確認したところ、画像がスムーズに移動しませんでした。
onmousemove()とIE8の相性が悪いのかもしれません。
詳細な回答ありがとうございました。
No.2
- 回答日時:
No1です。
書き忘れましたが、No1のままだとimgマウスがimgの上にあればイベントが
発生するので、divの外側に出ても画像は移動できてしまいます。
x、yの範囲を見ながら、移動するかしないのかの判断が必要です。
No.3
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
jQueryでのドラッグアンドドロ...
-
デフォルト非表示にしたい。【t...
-
clear機能を失わずにファイルア...
-
MAX関数を使ってからLEFT JOIN...
-
CSS のみのタブ切り替えについて
-
createElementで作成した要素を...
-
[急ぎ] videoタグで埋め込んだm...
-
jqueryで要素の中身を要素の外...
-
スクロール可能なチェックボックス
-
jspでcssが読み込めない
-
eclipseでcssを使うためには?
-
htmlの記述で link rel=styles...
-
アコーディオン自動開閉メニュ...
-
SimplyScrollについて
-
JQuery UIで、表示したタブの中...
-
divのheight指定で画面一杯に表...
-
【初心者】UWSCでjavascriptで...
-
チェックボックスに入っている...
-
jQueryアコーディオンで複数メ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
Javascript初心者|jQueryの.va...
-
jQueryでのドラッグアンドドロ...
-
アップロードファイルの種類に...
-
embed要素のsrc属性の値を変更...
-
fancyboxのポップアップ時の画...
-
JQueryで画像の上で文字を動かす
-
一定時間で入れ替わるバナー画...
-
ボタンを押すたびに交互に切り...
-
交互に入れ替わる画像を複数配置
-
全部のサイコロをjavascriptで...
-
clear機能を失わずにファイルア...
-
JavaScriptが、Firefoxで動かな...
-
bxsliderで最初に縦に複数表示...
-
「画像クリックで音声再生」を ...
-
画像マウスオーバーで、checkb...
-
イラストのボタンを押したとき...
-
背景色と連動するスライドショ...
おすすめ情報