Question

我正在试图让多个游标在我的网页上飞行。我让他们工作。我的问题是它们位于HTML5和javscript <canvas>元素之上。当它们结束时，我在页面上的其他JQuery动画工作正常，但它在画布的大部分（这是一个大的，交互式的，星空）上放置了纯白色。我该如何解决这个问题？

如果需要，我可以提供一些代码，但是我构建它的方式，它依赖于很多外部脚本和样式表等，所以它可能有点繁琐。

基本上，我需要将画布放在前面，同时保留部分JQuery动画。

编辑：我认为如果我展示了显示问题的图片会更有帮助。

Imgur

你可以看到底部剩下的星空。白色停止和星空开始的位置是光标动画的垂直约束。

我想让starfield出现在背景上，但是在游标下面。无论如何，有可能将容器的背景（这是一个div元素）设置为带有CSS的脚本，并使用该脚本为starfield设置动画？然后，我将能够最大化容器的大小并让光标全屏移动。

另外，不要担心黄色短吻鳄;它是一个独立的JQuery动画，可以成为后台的一部分。

EDIT2：我想我弄清了我的问题，但我不确定如何解决它。要为容器中的游标设置动画，游标的<div>位于容器的<div>内。游标的CSS设置为最高的z-index，但容器的CSS设置为最低的z-index。我怎样才能解决这个问题。

同样，我可以在必要时提供脚本，但我相信这里最相关的是为游标设置动画的，所以我会放在这里：

$(document).ready(function() {
    animateDiv($('.a'));
        animateDiv($('.b'));
        animateDiv($('.c'));

});

function makeNewPosition($container) {

    // Get viewport dimensions (remove the dimension of the div)
    var h = $container.height() - 50;
    var w = $container.width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];

}

function animateDiv($target) {
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $target.animate({
        top: newq[0],
        left: newq[1]
    }, speed, function() {
        animateDiv($target);
    });

};

function calcSpeed(prev, next) {

    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.25;

    var speed = Math.ceil(greatest / speedModifier);

    return speed;

}

EDIT3：

有效！它有效！

我将其他<div>元素从容器中取出。我从另一个SO问题中复制了脚本，那里的例子让我相信<divs>必须在容器内。但是，当我把它们放在外面时，一切都按照预期完成。哦，YEAH！

谢谢！ evamvid

Answer 1

使用CSS，您可以使用z-index属性更改元素的层，如此

<强> CSS

canvas { 
    position: absolute;
    z-index: 100;
}

请注意，因为你说你使用了很多样式表，你可能需要将z-index数增加到999以上，因为很多插件会将它设置为999.也适合你要使用z-index属性，元素必须具有position属性集

将帆布元素带到前面？

1 个答案: