浙江 杭州

jQuery UI炫酷雨滴落在水面上的波纹涟漪特效

系统分类: 网页特效 - jquery插件 - jQuery界面效果 2017-03-23

人气600

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


raindrops是一款效果非常炫酷的jQuery UI雨滴落在水面上的特效。该特效模拟水滴从空中落入平静的水面上的效果。通过参数可以设置水面波纹的大小,强度,波纹扩散的速度等等属性。

使用方法

该特效依赖于jQuery UI,使用时要引入jQuery,jQuery UI和raindrops.js文件。

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/raindrops.js"></script>                
              
HTML结构

制作该雨滴落在水面上的特效使用一个空的<div>即可。

<div id="example"></div>     
              
初始化插件

在页面加载完毕之后可以使用下面的方法来初始化该特效。

jQuery('#example').raindrops();                
              

配置参数

下面是该雨滴落在水面上的特效的一些可用配置参数。

参数 默认值 描述
color '#00aeef' 水面的颜色
waveLength 340 波浪的长度。数值越大波浪越短
frequency 3 雨滴落下的频率,数值越大频率越高
waveHeight 100 数值越大波浪的高度越高
density 0.02 水的密度。数值越大水波涟漪越短
rippleSpeed 0.1 水波涟漪的速度。数值越高水波涟漪越快
canvasWidth 100% 水面的宽度。默认值100%表示等于父容器的宽度
canvasHeight 50% 水面的高度。默认值50%表示父容器的一半
rightPadding 20 屏蔽有动画插件的不需要的间隙
position 'absolute' 画布的位置
positionBottom Bottom = 0 画布的位置
positionLeft Left = 0 画布的位置

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:295.05KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1877.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery UI炫酷雨滴落在水面上的波纹涟漪特效

我当前G币余额:0 已下载次数:0

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

据说认真评论作品的以后都迅速成长为大神了(已有0 评论)