Question

我正在尝试使用普通的javascript随机移动图像。在事件点击后，图像位置应根据生成的随机数移动。

这是我的代码：

<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>

有什么想法吗？谢谢！

Answer 1

您永远不会将changeImg()分配给<img>
```
<img ... onclick="changeImg()">
```
如果您打算使用position: absolute和top，则该元素必须为left。
<img>代码的ID为emotion，而不是smiley。
每次调用<img>函数时，您都不需要设置onclick的{{1}}属性。一次就够了。

Answer 2

这个在所有浏览器中都没有内联脚本

Codepen demo

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;
}

Answer 3

您永远不会设置图像对象的位置。相反，你将“笑脸”设置为相对，但图像是“情感”。

尝试

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

我建议你调用函数而不是字符串文字。例如：

obj.onclick = changeImg;

Answer 4

<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>

使图像随机移动点击

4 个答案: