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中删除它。如果您不确定如何打开检查元素或firebug，这是完整的源文件：http://ellislab.com/asset/js/ci.js

我担心我找不到任何“animate random sparks”jQuery插件。算一下冒险吧。深入膝盖，学习一些JavasScript，打破东西，玩得开心！我确信通过一些工作和学习，你可以使这个工作。

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

1 个答案: