Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
* { margin: 0; padding: 0; } html { overflow: hidden; } canvas { cursor:none; }
JavaScript
window.onload = function() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var pi = Math.PI; var centerX, centerY; var part_num =1000; var mousedown = false; var X, Y; /*===========================================================================*/ /*===========================================================================*/ var P = []; var part = function(x, y, vx, vy, r, red, green, blue, alpha, col) { this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.r = r; this.red = red; this.green = green; this.blue = blue; this.alpha = alpha; this.col = col; }; function rand(min, max) { return Math.random() * (max - min) + min; } function dist(dx, dy) { return Math.sqrt(dx * dx + dy * dy); } function size() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; centerX = canvas.width / 2; centerY = canvas.height / 2; } size(); X = centerX; Y = centerY; function init() { var x, y, vx, vy, r, red, green, blue, alpha, col; for (var i = 0; i < part_num; i++) { x = rand(0, canvas.width); y = rand(0, canvas.height); vx = rand(-1, 1); vy = rand(-1, 1); r = rand(1, 3); red = Math.round(rand(150, 200)); green = Math.round(rand(100, 255)); blue = Math.round(rand(180, 255)); alpha = 1; col = "rgba(" + red + "," + green + "," + blue + "," + alpha + ")"; P.push(new part(x, y, vx, vy, r, red, green, blue, alpha, col)); } } function bg() { ctx.fillStyle = "rgba(25,25,30,1)"; ctx.fillRect(0, 0, canvas.width, canvas.height); //ctx.clearRect(0, 0, canvas.width, canvas.height); } function bounce(b) { if (b.x < b.r) { b.x = b.r; b.vx *= -1; } if (b.x > canvas.width - b.r) { b.x = canvas.width - b.r; b.vx *= -1; } if (b.y - b.r < 0) { b.y = b.r; b.vy *= -1; } if (b.y > canvas.height - b.r) { b.y = canvas.height - b.r; b.vy *= -1; } } function attract(p) { var dx = (p.x - X), dy = (p.y - Y), dist = Math.sqrt(dx * dx + dy * dy), angle = Math.atan2(dy, dx); if (dist > 10 && dist < 300) { if (!mousedown) { p.vx -= (20 / (p.r * dist)) * Math.cos(angle); p.vy -= (20 / (p.r * dist)) * Math.sin(angle); } else if (mousedown) { p.vx += (250 / (p.r * dist)) * Math.cos(angle); p.vy += (250 / (p.r * dist)) * Math.sin(angle); } } } function draw() { var p; for (var i = 0; i < P.length; i++) { p = P[i]; if(mouseover) attract(p); bounce(p); p.x += p.vx; p.y += p.vy; p.vx *= .975; p.vy *= .975; ctx.fillStyle=p.col; ctx.fillRect(p.x,p.y,p.r,p.r); //ctx.beginPath(); //ctx.fillStyle = p.col; //ctx.arc(p.x, p.y, p.r, 0, 2 * pi); //ctx.fill(); } ctx.strokeStyle = (!mousedown) ? "rgba(255,255,255,1)" : "rgba(255,0,0,1)"; ctx.beginPath(); ctx.moveTo(X, Y - 10); ctx.lineTo(X, Y + 10); ctx.moveTo(X - 10, Y); ctx.lineTo(X + 10, Y); ctx.stroke(); } function loop() { bg(); draw(); window.requestAnimationFrame(loop); } window.onresize = size; window.onmousemove = function(e) { X = e.clientX; Y = e.clientY; } window.onmousedown = function() { mousedown = true; } window.onmouseup = function() { mousedown = false; } var mouseover=false; window.onmouseover = function() { mouseover = true; } window.onmouseout = function(){ mouseover=false; } init(); loop(); }
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>流体-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号