ClassyLeaves树叶飘落特效jQuery插件

ClassyLeaves树叶飘落特效jQuery插件

更新: 2015-11-14

阅读:1786

ClassyLeaves是一个jQuery插件,可在您的网站页面顶部生成各种树叶,并且这些树叶带有飘落特效:下降和旋转互动的叶子。如果你点击一片树叶,它就会掉下来;如果你点击一片落叶,就会发生神奇的事情。

插件安装

页面中引入jQuery和jQuery旋转插件jquery.rotate.js(下载包中已有),当然还有jquery.classyleaves.min.js和jquery.classyleaves.min.css

        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.rotate.js"></script>
        <script src="js/jquery.classyleaves.min.js"></script>
        <link rel="stylesheet" href="css/jquery.classyleaves.min.css" />

使用方法


var tree = new ClassyLeaves({
    leaves: 30,
    maxY: -10,
    multiplyOnClick: true,
    multiply: 2,
    infinite: true,
    speed: 4000
}); 


如果需要动态添加叶子的数量


tree.add(8); 


参数

  • leaves:初始化时叶子的数量,默认值为50
  • maxY:初始化时叶子区域的范围,负数为向上移动,正数为向下移动。默认值100
  • multiplyOnClick:当用户点击叶子时,是否会增加叶片数,默认值true
  • multiply:当点击叶子时产生的图片数量,默认值1
  • infinite:树叶是否无限的跌落。默认值true
  • speed:叶子跌落的速度,默认值为3000(毫秒)
  • numImages:在叶子图片文件夹中所有图片的数量,默认值为8
  • folder:放置叶子图片的文件夹所在的路径,默认值为images/leaves/