0

我有背景图片，通过使用小的 javascript 代码，它从右向左移动。

HTML 代码

<div id="clouds_image"></div>

Javascript代码

var g=0;
var speed=30;
function rollClouds() {
document.getElementById('clouds_image').style.backgroundPosition=g+'px 0';
g--;
scroller=setTimeout(function(){rollClouds()},speed);
}
window.addEventListener?
window.addEventListener('load',rollClouds,false):
window.attachEvent('onload',rollClouds);

但我注意到，随着时间的推移，我的 PC CPU 内存使用量增加了！导致我的电脑过载，如果我禁用了那个javascript代码，它就会恢复正常。

我的问题

所以我想我需要修改这个 javascript 代码，让它不能永远工作，我的意思是，我想让它只重复那个动作 5 次然后停止，也许我需要定义值，g但我不擅长 javascript所以任何帮助〜谢谢。

4

2 回答 2

1

一个更干净的解决方案可能是使用 jQuery 来移动背景：

function moveClouds() {
    $("#clouds_image").css({left:"-2000px"});
    $("#clouds_image").animate({left:"2000px"},10000);
}

然后您可以设置一个间隔以每 x 毫秒触发一次。

setInterval(moveClouds,10000)

JSFiddle 在这里：http: //jsfiddle.net/qXpVX/

于 2013-02-16T11:40:37.440 回答
1

您需要使用一个变量来计算该函数执行了多少次，并使用 setInterval 而不是 setTimeout：参见示例

http://jsfiddle.net/EQDjx/206/ （我的计数器从 100 开始下降到 0）

为了获得更好的效果，我建议您使用 jquery。见动画功能 http://api.jquery.com/animate/

var g = 1000;
var speed=300;
var counter = 100;
function rollClouds() {
document.getElementById('clouds_image').style.backgroundPosition=g+'px 0';
g--;
if (counter < 1) clearInterval(interval);
}
interval = setInterval(function(){rollClouds()}, speed)
于 2013-02-16T11:46:16.940 回答