Visual Studio中的Ripple Emulator:在252px之后,style.top的操作失败

时间:2016-03-20 22:08:02

标签: javascript visual-studio cordova visual-studio-2015 ripple

由于两天后,下面的脚本在Visual Studio 2015的Ripple Emulator中不再起作用.Cordova 3.0 + 2.0。 252px后,我的图片在y轴上停止。 x轴正在工作。

它仍在Chrome中成功运行,并且通过使用文件网址使用Ripple-Extension。

我希望图像从顶部位置向左下方移动225度。

2张照片解释一下:

不工作: localhost

工作: url

两次我使用相同的代码。缓存问题?

<html>
<head>
<title>Image moving</title>
<style>
    #Ball {
        position: absolute; 
        left: 500px; 
        top: 10px; 
        }
</style>
</head>
<body >
<script>
window.onload = function () {
    startBall();
};

function move(xstep, ystep) {

    var y = document.getElementById('Ball').offsetTop;
    var x = document.getElementById('Ball').offsetLeft;

    y = y + ystep;
    x = x + xstep;

    document.getElementById('Ball').style.top = y + "px"; // vertical movment
    document.getElementById('Ball').style.left = x + "px"; // horizontal movment
}

function startBall() {

    move(-1, 1);

    var y = document.getElementById('Ball').offsetTop;
    var x = document.getElementById('Ball').offsetLeft;

    document.getElementById("msg").innerHTML = "X: " + x + " Y: " + y;
    my_time = setTimeout('startBall()', 10);
}
</script>
<img src='images/Ball.jpg' id='Ball'>
<div id='msg'></div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

解决了它。

这是我在Chrome中的js缓存。无法用F5解决它,但我可以通过禁用缓存来解决它: Disabling Chrome cache for website development