Question

我试图在div中制作气泡效果。我找到了一个解决方案，但它通过鼠标事件来实现。但我希望它只是在div内做到这一点。不是用鼠标。 div将放置在浏览器的中间位置。并在onclick事件后显示气泡，并在10秒后停止。见：http://imgur.com/SKGfVE3

你也可以看到小提琴的工作演示：

http://jsfiddle.net/hfbcznfh/

你可以帮我解决这个问题吗？我被困了。

这是我的js代码：

:after

我非常感谢你的帮助。

最好的问候，这款Arja。

Answer 1

我已更新了您的Fiddle。如果那是你的想法，请告诉我！

<强>解释：

我们必须在容器中添加一个点击监听器，以触发Bubbles。

var $bubbles = $('.bubbles');

$bubbles.click(function(){
    var interval = setInterval(main, 1);
    setTimeout(function(){
        clearInterval(interval);
        ctx.fillStyle = "#4BF";
        ctx.fillRect(0,0,10000,100000);
    }, 10000);  // Animation time = 10,000ms / 10s
});

另外，我在CircleArr内修改了update个选项，以使用画布位置而不是鼠标。

CircleArr[CircleArr.length] = {
    x: canvas.width/2,  // use canvas width to set x pos
    y: canvas.height/2, // use canvas height to set y pos
    s: Math.random()*h/50,
    color: hslToRgb(currentColor % 1.00,1,.5)
};

我已经添加了一些CSS，以便在页面中间获取该div：

.bubbles-outer
{
    width: 100%;
    text-align: center;
}
canvas.bubbles
{
    background-color: #4BF;
    position: relative;
    margin: 0 auto;
    width: 200px;
    height: 200px;
}

希望这有帮助！

如何从水下气泡效果中删除鼠标事件

1 个答案: