Question

关注我在这里的最后一个问题，Moving an image with 360° angle in Javascript我最近尝试重新创建一个视差脚本，如本网站所示： http://wagerfield.github.io/parallax/

JsFIddle DEMO

该脚本远未完成它创建的任务，但问题是我无法继续使用它，因为我使用的浏览器几乎都想要粉碎。好像脚本消耗了太多内存或其他东西，即使我看到任务管理器，我也看到异常处理资源被分配给运行脚本的特定页面。

所以，我现在要搜索的是解决方案，如果有什么我做错了就消耗了这么多资源？或者更好......还有什么方法可以达到效果。

这是所有脚本：

<div id='circle'></div>
<div id='circlee'></div>

CSS ＃圈{ 背景：黑色; 宽度：80％; 高度：20％; 位置：绝对的; 边框：3px纯红色; }

   #circlee{
    background:black; 
    width:80%; 
    height:20%; 
    position:absolute;
    border:3px solid green;
   z-index:-1000;
}

Javascript：

            var speed =100,
            deg=0, center={x:100,y:100},
    moveBox = function(){
    var el = document.getElementById("circle"),
    left = el.offsetLeft,
    moveBy = 3; 
            deg+=moveBy;
    el.style.left =center.x+Math.floor(70*Math.sin(deg/100*Math.PI))+"px";
            el.style.top =center.y+Math.floor(70*Math.cos(deg/100*Math.PI))+"px";
    };

    var speede =80, dege=0, centere={x:100,y:100},
    moveBoxe = function(){
        var el = document.getElementById("circlee"),
            left = el.offsetLeft,
            moveBy = 3; 
            deg+=moveBy;
    el.style.left =centere.x+Math.floor(40*Math.sin(deg/100*Math.PI))+"px";
            el.style.top =centere.y+Math.floor(40*Math.cos(deg/100*Math.PI))+"px";
    };

    var timer = setInterval(moveBox, speed);
    var timere = setInterval(moveBoxe, speede);

Javascript视差滞后以及如何修复内存消耗

JsFIddle DEMO

0 个答案: