javascript动画因上面的元素而减慢

标签 javascript animation png

我在我的一个动画循环中遇到了一个非常神秘的问题。基本上我有一个在PNG蒙版后面运行的动画来创建发光效果。正如预期的那样,动画会无限地运行。但是,不久之后,动画速度减慢并最终停止。

这里是令人费解的部分:没有 png mask (及其中的 div),动画运行流畅。

这是怎么回事?

--这是没有蒙版的页面:http://chrismorga.com/rainnav/closed.html

--带着面具(重新加载并立即观察减速的光芒):http://chrismorga.com/rainnav/open.html

作为引用,这里是 javascript。函数在页面加载后运行:

function StartMove() {
var cssBGImage=new Image();
cssBGImage.src="img/blueshifter.jpg";

window.cssMaxWidth=cssBGImage.width;
window.cssXPos=0;
setInterval("MoveBackGround()",10);
}

function MoveBackGround () {
window.cssXPos=window.cssXPos+1;
    if (window.cssXPos>=window.cssMaxWidth) {
    window.cssXPos=0;
    }
toMove=document.getElementById("scroller");
toMove.style.backgroundPosition=window.cssXPos+"px 0px";
}

...

<body onload="StartMove()">

我的 JavaScript 是否使用了一些不好的做法?此时任何见解​​都会有所帮助。

最佳答案

-更新-

我纯粹是偶然发现了我的问题。我的手机运行动画效果很好,所以我想,为什么是这个 Chrome 而不是电脑 Chrome ?

事实证明,运行 chrome 19 导致了错误!快速更新,我运行得很好。我想我应该欢迎自己来到最前沿,哈哈。

关于javascript动画因上面的元素而减慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11297039/

相关文章:

javascript - 刷新后的div无法访问外部javascript文件

javascript - MouseEnter 事件未触发

jquery - 我如何使用 js-test-driver 测试 jquery 动画函数,例如 fadeTo、fadeOut?

wpf - 有任何可用于 WPF 的免费动画吗?

javascript - 使用 Gulp.js 自动运行 Jasmine 测试?

javascript - 如何阻止用户关闭 Javascript 中的窗口?

html - 如何多个div淡出淡入循环动画

c - 如何表示二进制透明度?

安卓png优化

javascript - 在 JavaScript 中创建并保存到文件新的 png 图像