Question

我想检查在这个页面http://statfa.net/glamorous/kenburn-slider/index.html中如何生成（粒子）画布效果，我看到了html代码。我可以看到

的部分

<div id="canvas" class="bg-overlay" style="background: url(http://statfa.net/glamorous/kenburn-slider/images/pattern-dark.png) repeat rgba(0, 0, 0, 0.298039);"> ....</div>

是动态的，它每2秒更改一次，我想知道为什么，我检查了所有的js文件，但我没有找到任何解释它。

Answer 1

看起来正在使用firefly plugin。查看页面底部附近的<script>标签

<script type="text/javascript" src="js/firefly.js"></script>                   
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/gmap-settings.js"></script> 
<script type="text/javascript" src="js/jquery.velocity.min.js"></script>
<script type="text/javascript" src="js/jquery.kenburnsy.min.js"></script>         
<script type="text/javascript" src="js/init.js"></script>

有js/firefly.js和js/init.js的引用。如果您选中http://statfa.net/glamorous/kenburn-slider/js/init.js，则会找到此语法

$("#preload").delay(1500).fadeOut(1e3,function(){
    animStart();if(firefly){
        $.firefly(
        {color:"#fff",
         minPixel:1,
         maxPixel:3,
         total:35,
         on:"#canvas"}
        )
    }
});

使用引用#canvas标记的<div id="canvas">，所以我认为这解释了画布效果。

无法理解它使用的是哪个库

1 个答案: