我的代碼出現問題。我有一個div(id-ball),它默認移動到頂部並離開。然後,當它到達包裝塊的頂部(id =域)時,「球」應該改變它的移動方向。但它改變了一切錯誤。這是我的代碼。不要嘲笑我的代碼技巧,我是新手... :) 我真的明白爲什麼球繼續飛向錯誤的方向,但我沒有任何想法如何我可以修復它,所以請幫助我:)div在達到邊界時更改移動方向
var ball = document.getElementById('ball');
var timer = setInterval(function()
{
var posTop = ball.offsetTop;
var posLeft = ball.offsetLeft;
var ballPositionX = parseFloat(window.getComputedStyle(ball). left) ;
var ballPositionY = parseFloat(window.getComputedStyle(ball). top);
ball.style.top = --posTop + 'px';
ball.style.left = ++posLeft + 'px';
if(ballPositionX <= 0)
{
ball.style.top = --posTop + 'px';
}
if(ballPositionX <= 550)
{
ball.style.top = ++posTop + 'px';
}
if(ballPositionY <= 0)
{
ball.style.left = ++posLeft + 'px';
}
if(ballPositionY >= 1000)
{
ball.style.left = --posLeft + 'px';
}
}, 10);
和HTML是在這裏:
<div class="field" id="field">
<div id="here"></div>
<div class="ball" id="ball"></div>
<div class="desk" id="desk"></div>
</div>
,這裏是CSS
*{
margin: 0;
padding: 0;
}
.field{
margin: 15px auto;
width: 1000px;
height: 650px;
border: 1px solid #000;
background: aliceblue;
position: relative;
overflow: hidden;
}
.ball{
width: 50px;
height: 50px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
background: green;
-webkit-border: 5px double silver;
-moz-border: 5px double silver;
-ms-border: 5px double silver;
-o-border: 5px double silver;
border: 5px double silver;
position: absolute;
top: 550px;
left: 0;
}
.desk{
width: 200px;
height: 25px;
background: darkblue;
-webkit-border: 3px double silver;
-moz-border: 3px double silver;
-ms-border: 3px double silver;
-o-border: 3px double silver;
border: 3px double silver;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
position: absolute;
top: 610px;
left: 10px;
}
.blocks{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 30px;
background: brown;
text-align: center;
color: lightcoral;
}
DEMO:http://jsfiddle.net/n3skLuo3/
你能提供演示嗎? – 2015-02-23 11:56:10
你可以創建一個jsfiddle嗎? – Ejaz 2015-02-23 11:56:17
是的,當然。鏈接是在我的問題的底部。 – BrainOverflow 2015-02-23 12:02:04