使用方法
1、包括jQuery和waterpipe.js
1 2 | <script src="lib/jquery-1.11.0.min.js"></script><script src="waterpipe.js"></script> |
2、创建画布元素内包装
1 2 3 | <div id="wavybg-wrapper" style="width: 100%; height: 100%;"> <canvas>Your browser does not support HTML5 canvas.</canvas></div> |
3、创建画布元素内包装
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var smokyBG = $('#wavybg-wrapper').waterpipe({ //Default values gradientStart: '#000000', gradientEnd: '#222222', smokeOpacity: 0.1, numCircles: 1, maxMaxRad: 'auto', minMaxRad: 'auto', minRadFactor: 0, iterations: 8, drawsPerFrame: 10, lineWidth: 2, speed: 1, bgColorInner: "#ffffff", bgColorOuter: "#666666"}); |
选项
选择类型 默认值
gradientStart string '#000000' 开始颜色的十六进制格式。
gradientEnd string '#222222' 渐变结束色十六进制格式。
smokeOpacity number 0.1 0.1号烟度0至1。.
numCircles int 1 Number of circles (smokes).
maxMaxRad int or 'auto' 'auto'可以用来改变圆半径的大小
minMaxRad int or 'auto' 'auto'可以用来改变圆半径的大小
minRadFactor int 0 表示相对于最大可能的最小半径大小。从0到1的整数。
iterations int 8 The number of subdividing steps to take when creating a single fractal curve. Can use more, but anything over 10 (thus 1024 points) is overkill for a moderately sized canvas.
drawsPerFrame int 10 Number of curves to draw on every tick of the timer
lineWidth number 2 Line width
speed int 1 Drawing speed (tick of timer in ms)
bgColorInner string '#ffffff' 背景外观颜色的十六进制格式
bgColorOuter string '#666666' 背景内颜色的十六进制格式
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery进度条插件NUMBERPROGRESSBAR
- 下一个特效： jquery幻灯片插件slidr.js