raindrops.js一款水滴涟漪动画效果的jquery.ui插件-BFW插件库

raindrops.js一款水滴涟漪动画效果的jquery.ui插件

raindrop.js一款水滴涟漪动画效果的jquery.ui插件

raindrops.js一款水滴涟漪动画效果的jquery.ui插件

使用方式：

第一步引入bfwone 加载依赖项jquery及jquery.ui

第二步use插件及css

第三步配置参数

参数	默认值	描述
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	画布的位置

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|jquery-ui-1.11.0.min&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["raindrops"], function() {
                $('#example').raindrops();
            });
        });
    </script>
    <style>
        #example {
            height: 230px;
        }

    </style>
</head>
<body>
    <div id="example"></div>


</body>
</html>

raindrops.js一款水滴涟漪动画效果的jquery.ui插件

网友评论0

pixi.min.js

jquery.gif.js

gif.js

jquery.fliptimer.js

gifshot.js

libgif.js

particleground.js

pts.js

bubbly-bg.js

PixelWave.js