这是我的代码:
<style type="text/css">
#box
{
width: 400px;
height: 400px;
border: 1px solid;
cursor: none;
}
#Parachute
{
width: 25px;
height: 25px;
cursor: none;
position: absolute;
}
</style>
<script type="text/javascript">
$("#StartGame").click(function () {
animateDiv();
});
function makeNewPosition() {
// Get viewport dimensions (remove the dimension of the div)
var h = $("#box").height() - 25;
var w = $("#box").width() - 25;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
}
function animateDiv() {
var newq = makeNewPosition();
$('#Parachute').animate({ top: newq[0], left: newq[1] }, function () {
animateDiv();
});
};
<script>
<centre>
<div id="box">
<img id="Parachute" src="Parachute.gif" width="25px" height="25px" />
</div>
<centre>
<input type="button" id="StartGame" value="Start Game" />
图像没有移动我做错了什么?
答案 0 :(得分:2)
你需要调整你的CSS ...
当您使用左侧和顶部时,图像的位置应设置为absolute
:
#Parachute
{
width: 400px;
height: 400px;
border: 1px solid;
cursor: none;
position: absolute;
}
如果不更改您的CSS,您也可以将js更改为:
$('#Parachute').animate({ 'margin-top': newq[0], 'margin-left': newq[1] }, function () {
animateDiv();
});
以获得理想的结果。
答案 1 :(得分:1)