javascript - 使图像随机 move onclick

标签 javascript html css image move

我正在尝试使用普通 javascript 使图像随机 move 。 发生 onclick 事件时,图像位置应根据生成的随机数 move 。

这是我的代码:

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

有什么想法吗? 谢谢!

最佳答案

这个在所有浏览器中都不需要内联脚本

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

关于javascript - 使图像随机 move onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15510922/

相关文章:

javascript - 捕获我的 Canvas 下的内容作为图像的一部分

css - 如何在 Vue 组件中覆盖 css

javascript - 防止 ng-click 触发确认对话框(在 Angular 1.2 RC3 中停止工作)

javascript - Alfresco 使用 js 将类别应用到文档

javascript - Node.js请求通信

css - 如何将 <a>-block 放入当前 <div> 的右下角?

css - 当 li 是超链接时如何删除文本装饰

javascript - 是否可以将回调附加到委托(delegate)事件监听器 (.on()) 的设置?

html - 分词属性如何从空间中分离出来?

html - 如何在css中设置动画?