如何使用jQuery实现像 http://ellislab.com/codeigniter 这样的火花效果

Question

我想重现一种效果，就像在橙色"英雄"铅的背景中飞溅的火花一样 http://ellislab.com/codeigniter。

我查看了它背后的jQuery，看起来很复杂，是否有任何库或任何"模板/教程"明智的方向？

谢谢

Answer 1

嗯，JavaScript的好处是它是客户端的，所以你可以确切地看到他们是如何做到的。这是一个非常简单的javascript，他们只是使用css来设置火花的样式。以下是运行火花的主要代码集：

// Let some sparks fly in a somewhat randomly timed fashion
          this.startSpark = function(){
            if (me.sparkInterval != null) return;
            me.sparkInterval = setInterval(function(){
              var opac = Math.max(.15, Math.random() - .4),
                  size = Math.floor(Math.random() * 120 + 30),
                  spark = $('<div/>').addClass('spark')
                    .css({
                      'width': size,
                      'height': size,
                      'opacity': opac, 
                      '-moz-opacity': opac
                    });
              $wrapper.append(
                spark
                .css(
                  {
                    "bottom": "-100px",
                    "left": (Math.random() * 100) + "%"
                  }
                )
                .animate(
                  {
                    "bottom": "800px",
                  },
                  Math.floor(Math.random()*3000+1000),
                  "linear",
                  function(){
                    $(this).remove(); // don't need the spark if we're in the dark
                  }
                )
              )
            }, 500)
          }

基本上，他们

创建一个"火花"div，随机设置不透明度，宽度和高度以及位置，将其附加到DOM中，然后随机对其进行动画处理，当动画完成后，他们将其从DOM中删除。如果您不确定如何打开检查元素或 firebug，以下是整个源文件： http://ellislab.com/asset/js/ci.js

恐怕我找不到任何"动画随机火花"jQuery插件。就算这是一次冒险吧。深入膝盖，学习一些JavasScript，打破东西，玩得开心！我相信通过一些工作和学习，你可以做到这一点。