Question

我正在尝试创建一个有很多圈子移动的背景，它确实推动浏览器有点太难了。

在没有太多资源密集的情况下，我有什么方法可以做到这一点？

$( document ).ready(function() {

    // Create all our glorious bubbles
    for (var i = 1; i <= 150; i++) {
        $('#bubbles').append('<span class="bubble' + i + '"></span>');
    }

    // Get random number
    function getRandomInt (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // Function to move bubbles randomly
    function moveRandom(obj) {
        var positionTop = getRandomInt(-350,1000);
        var positionLeft = getRandomInt(-700,1600);
        var positionTopNew = positionTop + getRandomInt(-50,50);
        var positionLeftNew = positionLeft + getRandomInt(-50,50);
        var size = getRandomInt(30,60);

        function animation() {
            obj.animate({
                top: positionTop + 'px',
                left: positionLeft + 'px',
                width: size,
                height: size
                }, 6000
            );
            obj.animate({
                top: positionTopNew + 'px',
                left: positionLeftNew + 'px'
                }, 6000, function() {
                    animation();
            });
        }

        animation();
    }

    // Activate bubble movement
    $('#bubbles span').each(function() {
        moveRandom($(this));
    })
});

或者只是动画过多的元素，它总是会耗费资源？

Answer 1

非常整洁！您可能希望使用HTML 5 canvas元素来执行此操作。它将使用GPU并且不需要第三方js库。

REF：

http://updates.html5rocks.com/2012/07/Taking-advantage-of-GPU-acceleration-in-the-2D-canvas https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial

Answer 2

有两件事情会浮现在脑海中。您可以在Createjs.com上查找如何使用<canvas>标记和非常酷的示例要么你可以gopro和学习webgl和three.js使用gpu进行酷炫的快速3D效果！

jQuery动画背景与许多元素

2 个答案: