HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 资源下载 开源代码 查看内容

fallingsnow.js-jquery下雪动画特效

2016-11-8 13:24| 发布者: microHTML| 查看: 946| 评论: 0|来自: jQuery之家

摘要: fallingsnow.js是一款小巧的jquery下雪动画特效插件。该jquery下雪动画特效兼容ie8浏览器,它会控制雪花的飘落速度,雪花的尺寸越小,下落的速度越慢,可以制作出雪花飞舞的视觉差效果。 ...

插件下载:http://down.htmleaf.com/1611/201611071446.zip

简要教程


fallingsnow.js是一款小巧的jquery下雪动画特效插件。该jquery下雪动画特效兼容ie8浏览器,它会控制雪花的飘落速度,雪花的尺寸越小,下落的速度越慢,可以制作出雪花飞舞的视觉差效果。


使用方法


在页面中引入jquery.fallingsnow.css和jquery、jquery.fallingsnow.min.js文件。


<link rel="stylesheet" href="dist/jquery.fallingsnow.css" type="text/css">

<script src="path/to/jquery.min.js"></script>

<script src="path/to/jquery.fallingsnow.min.js"></script>


HTML结构


可以使用一个<div>元素作为包裹容器,里面放置另外一个<div>元素作为下雪的场景。例如:


<style>

#snow-wrapper {

width: 500px;

height: 500px;

...

}

</style>

<div id="snow-wrapper">

<div id="snow"></div>

</div>


初始化插件


在页面DOM元素加载完毕之后,可以通过fallingSnow()方法来初始化该下雪特效插件。


$( "#snow" ).fallingSnow();


配置参数


fallingsnow.js下雪特效插件的可用配置参数有:

flakeSizeAdjust:控制雪花的尺寸。0.1为最小值,默认为1,建议不要设置为0。

flakeSpeedAdjust:控制雪花的速度。0.1为最快速度,默认值为2,建议不要设置为0。

stopOnClick:是否在点击时停止下雪。

stopElement:指定一个点击之后停止下雪的元素,默认为#snow。

drift:设置雪花飘动效果。默认为100。


fallingsnow.js下雪动画特效的github地址为:https://github.com/RayHyde/fallingsnow


原文链接:http://www.htmleaf.com/jQuery/Layout-Interface/201611074175.html

原作者:jQuery之家


本站文章均由 HTML5中国 编辑从其他媒体精选HTML5相关文章转载,仅供网友学习和交流,如果我们的工作有侵犯到您的权益,请及时联系站长QQ:2601929995,我们会在第一时间进行处理!

投稿: admin@html5cn.org


鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-5-29 17:42

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部