使简单的js小提琴动画在按钮单击而不是页面加载时开始

Make simple js fiddle animation start on button click instead of page load.

本文关键字：加载 开始 单击 js 简单 小提琴 动画 按钮      更新时间：2023-09-26

我发现这个相当酷的Js小提琴，并且一直在编辑动画，并认为它可以在当前项目中使用。然而，我不是最好的Javascript。要完成其余目标，我真正需要知道的是如何使动画在单击按钮之前不会启动。

这是js小提琴的动画。

http://jsfiddle.net/apipkin/qUTwQ/

这是 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小提琴中。

谢谢你的任何帮助！

您可以简单地将其包装在一个函数中，然后在单击时调用该函数。

演示

创建一个按钮：

<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();
        });
    }
});
}
相关文章：