jquery - 如何使用 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)
          }

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

恐怕我找不到任何适合你的“动画随机火花”jQuery 插件。把这算作一次冒险吧。深入了解，学习一些 JavaScript，打破常规，玩得开心！我敢肯定，通过一些工作和学习，您可以完成这项工作。