如何停止移动背景图像位置

我有背景图片，并通过使用小的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);

但我注意到，随着时间的推移我的电脑CPU内存使用率增加！导致我的电脑过载，如果我禁用该JavaScript代码，它恢复正常。

我的问题

，所以我想我需要修改它不继续工作永远这段JavaScript代码，我的意思是，我希望把它重复这一动作则只有5次停下来，也许我需要定义g的值，但我不擅长JavaScript，所以任何帮助〜谢谢。

来源

2013-02-16 Reham Fahmy

你需要使用一个变量来计算该功能被执行多少次，并使用替代的setTimeout的setInterval：见例如

http://jsfiddle.net/EQDjx/206/（我的柜台开始从100和下降到0）

为了更好的效果我催促你使用jquery。见动画功能

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-16 11:46:16

谢谢，但它仍然工作到永远，看起来像它不计算每个执行的功能它保持考虑100> 1，所以永远工作，没有滴计数。 – 2013-02-16 12:38:34

一个清洁的解决办法可能是使用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-16 11:40:37 turiyag

谢谢您的回答，但我不知道如果我想使用的JavaScript代码在我的问题，而不是jQuery的。 – 2013-02-16 11:44:43

你可以使用你的代码。但是，真的，你不想。 jQuery被设计为免费工具，让您的生活更轻松，作为一名经验丰富的Web开发人员，我可以说100％是值得你学习的时间。 – turiyag 2013-02-16 11:50:29

我尽量避免70KB加载，因为我只需要这样的效果，所以如果我的网站需要其他效果，那么的确会只是jQuery :) – 2013-02-16 11:54:17

如何停止移动背景图像位置

回答

相关问题