900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html5给页面添加树叶特效 jQuery超酷页面树叶飘落装饰特效插件

html5给页面添加树叶特效 jQuery超酷页面树叶飘落装饰特效插件

时间:2024-05-15 15:56:12

相关推荐

html5给页面添加树叶特效 jQuery超酷页面树叶飘落装饰特效插件

这是一款效果非常炫酷的页面树叶飘落装饰特效jQuery插件。该jQuery插件可以在页面顶部生成各种树叶,这些树叶会随机飘落,在树叶飘落的过程中,使用鼠标点击它将会发生更加神奇的效果。

该jQuery插件支持IE10以上的所有最新版现代浏览器,并且在移动手机上做了优化,它在使用上也非常简单。

使用方法

使用该落叶jQuery插件需要引入jQuery和jquery.rotate.js插件以及jquery.classyleaves.min.css和jquery.classyleaves.min.js文件。

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该落叶插件。

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/。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。