如何在javascript中隨機移動圖片

Question

當我用addEventListener單擊鼠標時我如何隨機移動球，我嘗試了此代碼但圖片沒有移動。 此代碼有什么問題？

html代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="work.js"></script>

<link type="text/css" rel="stylesheet" href="work.css">
</head>

<body>

<div id = "frame" >
<div id = "net1"> </div>
<div id = "net2"> </div>
<div id = "centerPoint"> </div>
<div id = "centerLine"> </div>
<img src="SoccerBall.png" width="40" alt="Ball" class="moveBall">
</div>

</body>

</html>

JavaScript代碼

var ball = document.querySelector('.moveBall');
function bbb(){

var ball = document.querySelector('.moveBall');

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

document.querySelector('#frame').addEventListener('click',bbb);

這是我的CSS代碼：

     #frame{
         border:solid thick red;
         border-width:3px;
         padding-left:9px;
         padding-top:6px; 
         padding-bottom:6px;
         margin:2px;
         width:1220px;
         height:1000px;
         float:right;
         background-color:green;

      }


 .moveBall {
    position:absolute;
    top: 0px; 
    left: 0px; 
     }
  #net1{

 background-color: lightgray;
 width: 400px;
 padding: 40px;
 margin: auto;

  }

 #net2{

 background-color: lightgray;
 width: 400px;
 padding:40px;
 margin:auto;
 margin-top:840px;

Answer 1

增加風格position:absolute球

 (function() { function bbb(){ var ball = document.querySelector('.moveBall'); console.log(ball); var x = Math.floor(Math.random()*300); var y = Math.floor(Math.random()*300); ball.style.left = x + 'px'; ball.style.top = y + 'px'; }; document.querySelector('#frame').addEventListener('click',bbb); })();

 #frame{ border:solid thick red; border-width:3px; padding-left:9px; padding-top:6px; padding-bottom:6px; margin:2px; width:1220px; height:1000px; float:right; background-color:green; } .moveBall { width:40px; height:40px; position:absolute; top: 0px; left: 0px; border-radius:50%; border:1px solid red; } #net1{ background-color: lightgray; width: 400px; padding: 40px; margin: auto; } #net2{ background-color: lightgray; width: 400px; padding:40px; margin:auto; margin-top:840px; }

 <div id = "frame" > <div id = "net1"> </div> <div id = "net2"> </div> <div id = "centerPoint"> </div> <div id = "centerLine"> </div> <img src="http://via.placeholder.com/350x150" width="40" alt="Ball" class="moveBall"> </div>

如何在javascript中隨機移動圖片

問題描述

1 個解決方案

解決方案1
2 2017-05-31 16:45:53

如何在javascript中隨機移動圖片

問題描述

1 個解決方案

解決方案1 2 2017-05-31 16:45:53

解決方案1
2 2017-05-31 16:45:53