Question

我发现这个相当酷的Js小提琴，并且已经编辑了一点动画，并认为它可以用于当前项目。但是我不是最好的Javascript。我真正需要知道的是完成剩余的目标是如何在点击按钮之前不启动动画。

这是js小提琴的动画。

这是css。

#o { 
    width: 200px; 
    height: 400px; 
    position: relative; 
    border-bottom: 1px solid blue;}

  .bubble { 
    border: 1px solid 
    #f40009; display: block; 
    position: absolute; 
    border-radius: 20px; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    }

其余的是JS小提琴。

感谢任何帮助！

Answer 1

您只需将其包装在一个函数中，然后单击即可调用该函数。

DEMO

创建一个按钮：

<button id="btn">Click</button>

这是js：

document.getElementById('btn').addEventListener('click', startAnimation);
function startAnimation() {
YUI().use('node', 'anim', 'anim-node-plugin', function(Y) {

    var o = Y.one('#o'),
        oW = o.get('offsetWidth'),
        oH = o.get('offsetHeight'),
        max = 12,
        min = 4,
        bubbles = 20,
        timerDelay = 4000;


    function makeBubble() {
        var b = Y.Node.create('<span class="bubble"></span>');

        b.plug(Y.Plugin.NodeFX, {
            duration: 7,
            easing: Y.Easing.easeOut,
            to: {
                top: 0,
                opacity: 0
            },
            on: {
                end: function() {
                    Y.later(10000, this, function(){
                    animBubble(this.get('node'));
                    });
                }
            }
        });

        o.append(b);
        animBubble(b);
    }

    function animBubble(b) {
        var v = Math.floor(Math.random() * (max - min)) + min;

        b.setStyles({
            height: v + 'px',
            width: v + 'px',
            borderRadius: v + 'px',
            top: (oH + 2) + 'px',
            opacity: 1
        });

        b.setStyle('left', Math.floor(Math.random() * (oW - v)));

        b.fx.set('duration', Math.floor(Math.random() * 2 + 3));
        b.fx.set('to.top', Math.floor(Math.random() * (oH / 2)));


        b.fx.run();
    }

    for (i = 0; i < bubbles; i++) {
        Y.later(Math.random() * timerDelay, this, function() {
            makeBubble();
        });
    }

});
}

在按钮单击而不是页面加载时，使简单的js小动画启动。

1 个答案: