Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
* { overflow: hidden; background:#000; } canvas { display: block; background:#00e1e9; background:radial-gradient(#00e1e9 20%, #000 120%); }
JavaScript
// Customize these... var n = 150, speed = 15, startSize = rand(99,300); // ...not these var c = document.getElementById("c"), ctx = c.getContext("2d"), cw = (c.width = window.innerWidth), ch = (c.height = window.innerHeight), mousePos = {x:"", y:""}, img = new Image(), particles = [], Particle = function(index) { this.index = index; this.dur = (100-rand(9, 90))/speed; this.draw = function() { ctx.translate( this.x, this.y ); ctx.globalAlpha = this.alpha; ctx.globalCompositeOperation = 'lighter'; if (index%2==0) ctx.globalCompositeOperation = 'xor'; ctx.drawImage(img, -this.size/2, -this.size/2, this.size, this.size); ctx.translate( -this.x, -this.y ); } }; c.onmousemove = function(e){ mousePos = { x:e.clientX, y:e.clientY }; } document.onmouseleave = document.ontouchend = function(e){ mousePos = {x:"", y:""} } function setParticle(p, firstRun) { var startProps = { x:cw/2+rand(0,60)-30, y:ch/2+rand(0,60)-30, size:startSize, alpha:0 }; if (rand(0,1)>0.3 && mousePos.x!="") startProps = { x:mousePos.x, y:mousePos.y, size:startSize/10, alpha:0 }; var _tl = new TimelineMax().fromTo(p, p.dur, startProps, { size:'+='+String(rand(200,400)), bezier:[{alpha:rand(0.15,0.65)},{alpha:0}], ease:Power1.easeOut,//ease:Power0.easeNone, onComplete:function(){ setParticle(p); } }); if (firstRun) _tl.seek(p.dur*rand()); } TweenMax.ticker.addEventListener("tick", function(){ ctx.clearRect(0, 0, cw, ch); for (var i=0; i
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas 水波效果(互动)-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号