5

プレーンなJavaScriptを使用して画像をランダムに移動させようとしています。イベントonclickで、画像の場所は生成された乱数に従って移動する必要があります。

これが私のコードです：

<html>
<head><title> Move Image </title>

<style type="text/css">
#smiley { position: relative; top: 0px; left: 0px; }
</style>

<script type="text/javascript">

function changeImg()
{
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);


var obj = document.getElementById("emotion");

obj.style.top = x + "px";
obj.style.left = y + "px";


 obj.onclick= "changeImg();"
 }

</script>
</head>
<body>
<img id="emotion" 
src="http://www.google.com/images/srpr/logo4w.png" 
width="42" height="42">
</body>
</html>

何か案が？ありがとうございました！

4

4 に答える 4

2

これは、すべてのブラウザーでインラインスクリプトなしで機能します

Codepen デモ

var object = document.getElementById('item');

object.onclick=function(){
    var x = Math.floor(Math.random()*300);
    var y = Math.floor(Math.random()*300);
    object.style.top = x + 'px';
    object.style.left = y + 'px';
};

HTML

<img id="item" src="http://...png" />

CSS

#item { 
  cursor: pointer;
  position: absolute; 
  top: 0px; 
  left: 0px; 
  transition: all 1s;
}
于 2015-06-20T13:41:07.753 に答える
1

  • あなたは決して割り当てchangeImg()ていません<img>

    <img ... onclick="changeImg()">

  • およびposition: absoluteを使用する予定がある場合、要素は である必要があります。topleft

  • <img>タグの ID はではemotionなくsmileyです。

  • 関数が呼び出されるたびに<img>のプロパティを設定する必要はありません。一回だけで十分です。onclickchangeImg()

于 2013-03-19T21:39:40.780 に答える
0

画像オブジェクトの位置を設定することはありません。代わりに「スマイリー」を相対に設定しますが、イメージは「感情」です。

試す

#emotion{ position: relative; top: 0px; left: 0px; }

文字列リテラルではなく関数を呼び出すことをお勧めします。例：

obj.onclick = changeImg;
于 2013-03-19T21:42:13.440 に答える
-1 
<html>
<head><title> Move Image </title>

<style type="text/css">
#emotion { position: absolute; top: 0px; left: 0px; border:1px solid red;}
</style>

<script type="text/javascript">

function changeImg()
{
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);


var obj = document.getElementById("emotion");

obj.style.top = x + "px";
obj.style.left = y + "px";


 }

</script>
</head>
<body>
<img id="emotion" 
src="http://www.google.com/images/srpr/logo4w.png" 
width="150" height="42" onclick="changeImg()"/>
</body>
</html>
于 2016-09-25T21:26:09.673 に答える