Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
html, body { width: 100%; height: 100%; overflow: hidden; } body { background-color: #999999; } #wrapper { position: absolute; top: 50%; left: 0; right: 0; height: 508px; margin-top: -268px; } #pops { display: block; margin: 0 auto; opacity: 0.2; } #popsShape { display: table; clear: both; margin: -75px auto 0; } #popsShape label { display: block; float: left; margin: 0 7px; cursor: pointer; } #popsShape label input { overflow: hidden; position: absolute; margin: -1px; padding: 0; border: 0; width: 1px; height: 1px; opacity: 0; visibility: hidden; clip: rect(0 0 0 0); } #popsShape label svg { display: block; width: 88px; height: 88px; fill: transparent; stroke: rgba(0,0,0,0.2); stroke-width: 4; opacity: 0; -webkit-animation: svgAnimation 1.5s ease 0.65s forwards; animation: svgAnimation 1.5s ease 0.65s forwards; } #popsShape label svg:hover { fill: rgba(0,0,0,0.1); } @-webkit-keyframes svgAnimation { 100% { opacity: 1; } } @keyframes svgAnimation { 100% { opacity: 1; } } #popsShape label input:checked ~ svg, #popsShape label input:checked ~ svg:hover { fill: rgba(0,0,0,0.2); stroke: transparent; }
JavaScript
// This canvas is inspired from @Pyramidium // in his Pen Canvas Nodes. var Pops = { density: 20, drawDistance: 0, baseRadius: 4, maxLineThickness: 4, reactionSensitivity: 0.5, lineThickness: 1, points: [], mouse: { x: -1000, y: -1000, down: false, move: false }, animation: null, canvas: null, context: null, imageInput: null, bgImage: null, bgCanvas: null, bgContext: null, bgContextPixelData: null, init: function() { this.canvas = document.getElementById('pops') this.context = this.canvas.getContext('2d') this.context.globalCompositeOperation = 'lighter' this.canvas.style.display = 'block' this.canvas.addEventListener('mousemove', this.mouseMove, false) this.canvas.addEventListener('mousedown', this.mouseDown, false) this.canvas.addEventListener('mouseup', this.mouseUp, false) this.canvas.addEventListener('mouseout', this.mouseOut, false) this.preparePoints() this.draw() }, preparePoints: function() { this.points = [] var width, height, i, j, pop var color = '0, 0, 0' var offset = 420/4 var that = this function pushPoint(x, y, originalX, originalY, radius, opacityDelay) { that.points.push({ x: x + offset, y: y + offset, originalX: originalX + offset, originalY: originalY + offset, radius: radius, opacityDelay: opacityDelay, color: color }) } // POPS 14 pop = 14 pushPoint(170, 50, 170, 50, pop, - 0.7) pushPoint(131, 177, 131, 177, pop, - 0.4) // POPS 12 pop = 12 pushPoint(68, 23, 68, 23, pop, - 0.2) pushPoint(128, 48, 128, 48, pop, 0) pushPoint(21, 64, 21, 64, pop, - 0.6) pushPoint(182, 119, 182, 119, pop, 0) pushPoint(92, 127, 92, 127, pop, - 0.4) pushPoint(47, 153, 47, 153, pop, - 0.9) pushPoint(88, 198, 88, 198, pop, - 0.1) // POPS 10 pop = 10 pushPoint(118, 10, 118, 10, pop, - 0.7) pushPoint(50, 50, 50, 50, pop, - 0.3) pushPoint(51, 86, 51, 86, pop, 0) pushPoint(166, 88, 166, 88, pop, - 0.1) pushPoint(17, 115, 17, 115, pop, - 0.6) pushPoint(184, 156, 184, 156, pop, 0) pushPoint(55, 188, 55, 188, pop, - 0.5) // POPS 7 pop = 7 pushPoint(94, 10, 94, 10, pop, - 0.1) pushPoint(139, 23, 139, 23, pop, - 0.2) pushPoint(98, 40, 98, 40, pop, - 0.9) pushPoint(74, 59, 74, 59, pop, - 0.4) pushPoint(191, 63, 191, 63, pop, - 0.6) pushPoint(145, 73, 145, 73, pop, - 0.3) pushPoint(26, 88, 26, 88, pop, - 0.7) pushPoint(7, 93, 7, 93, pop, 0) pushPoint(105, 92, 105, 92, pop, - 0.1) pushPoint(203, 102, 203, 102, pop, - 0.7) pushPoint(156, 110, 156, 110, pop, 0) pushPoint(48, 126, 48, 126, pop, - 0.8) pushPoint(119, 144, 119, 144, pop, - 0.8) pushPoint(16, 148, 16, 148, pop, 0) pushPoint(155, 151, 155, 151, pop, - 0.9) pushPoint(85, 158, 85, 158, pop, - 0.7) pushPoint(157, 185, 157, 185, pop, - 0.5) pushPoint(112, 198, 112, 198, pop, - 0.4) // POPS 5 pop = 5 pushPoint(162, 23, 162, 23, pop, - 0.4) pushPoint(114, 31, 114, 31, pop, - 0.1) pushPoint(77, 42, 77, 42, pop, 0) pushPoint(29, 44, 29, 44, pop, - 0.8) pushPoint(148, 56, 148, 56, pop, - 0.1) pushPoint(187, 86, 187, 86, pop, - 0.2) pushPoint(90, 99, 90, 99, pop, - 0.5) pushPoint(118, 102, 118, 102, pop, 0) pushPoint(32, 104, 32, 104, pop, - 0.4) pushPoint(120, 124, 120, 124, pop, - 0.6) pushPoint(157, 131, 157, 131, pop, 0) pushPoint(32, 133, 32, 133, pop, - 0.5) pushPoint(196, 136, 196, 136, pop, - 0.4) pushPoint(105, 160, 105, 160, pop, - 0.2) pushPoint(27, 164, 27, 164, pop, - 0.8) pushPoint(164, 166, 164, 166, pop, - 0.2) pushPoint(75, 178, 75, 178, pop, - 0.6) // POPS 4 pop = 4 pushPoint(103, 24, 103, 24, pop, - 0.5) pushPoint(87, 26, 87, 26, pop, - 0.1) pushPoint(49, 31, 49, 31, pop, - 0.5) pushPoint(152, 35, 152, 35, pop, - 0.7) pushPoint(95, 56, 95, 56, pop, - 0.3) pushPoint(44, 69, 44, 69, pop, - 0.9) pushPoint(159, 70, 159, 70, pop, 0) pushPoint(201, 78, 201, 78, pop, - 0.1) pushPoint(44, 110, 44, 110, pop, - 0.5) pushPoint(111, 117, 111, 117, pop, 0) pushPoint(9, 131, 9, 131, pop, - 0.1) pushPoint(170, 139, 170, 139, pop, - 0.3) pushPoint(98, 146, 98, 146, pop, - 0.7) pushPoint(149, 165, 149, 165, pop, 0) pushPoint(68, 166, 68, 166, pop, - 0.5) pushPoint(38, 179, 38, 179, pop, 0) pushPoint(101, 179, 101, 179, pop, - 0.7) pushPoint(131, 202, 131, 202, pop, - 0.9) // POPS 3 pop = 3 pushPoint(151, 16, 151, 16, pop, - 0.6) pushPoint(126, 29, 126, 29, pop, - 0.1) pushPoint(65, 44, 65, 44, pop, - 0.4) pushPoint(110, 56, 110, 56, pop, 0) pushPoint(59, 66, 59, 66, pop, - 0.8) pushPoint(178, 74, 178, 74, pop, - 0.1) pushPoint(7, 77, 7, 77, pop, - 0.7) pushPoint(150, 88, 150, 88, pop, - 0.6) pushPoint(187, 99, 187, 99, pop, - 0.4) pushPoint(20, 100, 20, 100, pop, - 0.8) pushPoint(52, 103, 52, 103, pop, 0) pushPoint(169, 105, 169, 105, pop, - 0.1) pushPoint(3, 107, 3, 107, pop, - 0.7) pushPoint(97, 108, 97, 108, pop, - 0.3) pushPoint(34, 119, 34, 119, pop, - 0.3) pushPoint(204, 123, 204, 123, pop, - 0.1) pushPoint(109, 132, 109, 132, pop, 0) pushPoint(20, 135, 20, 135, pop, - 0.4) pushPoint(118, 159, 118, 159, pop, - 0.8) pushPoint(57, 171, 57, 171, pop, - 0.7) pushPoint(89, 174, 89, 174, pop, - 0.1) pushPoint(174, 175, 174, 175, pop, - 0.6) pushPoint(143, 195, 143, 195, pop, 0) // POPS 2 pop = 2 pushPoint(134, 9, 134, 9, pop, - 0.1) pushPoint(81, 10, 81, 10, pop, - 0.8) pushPoint(51, 20, 51, 20, pop, - 0.2) pushPoint(170, 30, 170, 30, pop, - 0.4) pushPoint(39, 36, 39, 36, pop, - 0.8) pushPoint(111, 42, 111, 42, pop, - 0.2) pushPoint(146, 43, 146, 43, pop, - 0.3) pushPoint(85, 50, 85, 50, pop, - 0.6) pushPoint(39, 59, 39, 59, pop, - 0.8) pushPoint(135, 65, 135, 65, pop, - 0.1) pushPoint(63, 75, 63, 75, pop, 0) pushPoint(191, 76, 191, 76, pop, - 0.7) pushPoint(36, 77, 36, 77, pop, 0) pushPoint(196, 91, 196, 91, pop, - 0.4) pushPoint(38, 94, 38, 94, pop, - 0.2) pushPoint(107, 106, 107, 106, pop, - 0.3) pushPoint(86, 109, 86, 109, pop, 0) pushPoint(121, 113, 121, 113, pop, - 0.6) pushPoint(165, 121, 165, 121, pop, - 0.2) pushPoint(30, 148, 30, 148, pop, - 0.8) pushPoint(108, 149, 108, 149, pop, - 0.4) pushPoint(129, 155, 129, 155, pop, - 0.6) pushPoint(64, 157, 64, 157, pop, - 0.3) pushPoint(139, 157, 139, 157, pop, 0) pushPoint(97, 167, 97, 167, pop, - 0.1) pushPoint(37, 169, 37, 169, pop, - 0.7) pushPoint(111, 171, 111, 171, pop, 0) pushPoint(47, 174, 47, 174, pop, - 0.7) pushPoint(169, 182, 169, 182, pop, - 0.3) pushPoint(110, 186, 110, 186, pop, - 0.2) pushPoint(71, 188, 71, 188, pop, - 0.6) }, nucubuc: [ // POPS 14 {x: 170, y: 50}, {x: 131, y: 177}, // POPS 12 {x: 68, y: 23}, {x: 128, y: 48}, {x: 21, y: 64}, {x: 182, y: 119}, {x: 92, y: 127}, {x: 47, y: 153}, {x: 88, y: 198}, // POPS 10 {x: 118, y: 10}, {x: 50, y: 50}, {x: 51, y: 86}, {x: 166, y: 88}, {x: 17, y: 115}, {x: 184, y: 156}, {x: 55, y: 188}, // POPS 7 {x: 94, y: 10}, {x: 139, y: 23}, {x: 98, y: 40}, {x: 74, y: 59}, {x: 191, y: 63}, {x: 145, y: 73}, {x: 26, y: 88}, {x: 7, y: 93}, {x: 105, y: 92}, {x: 203, y: 102}, {x: 156, y: 110}, {x: 48, y: 126}, {x: 119, y: 144}, {x: 16, y: 148}, {x: 155, y: 151}, {x: 85, y: 158}, {x: 157, y: 185}, {x: 112, y: 198}, // POPS 5 {x: 162, y: 23}, {x: 114, y: 31}, {x: 77, y: 42}, {x: 29, y: 44}, {x: 148, y: 56}, {x: 187, y: 86}, {x: 90, y: 99}, {x: 118, y: 102}, {x: 32, y: 104}, {x: 120, y: 124}, {x: 157, y: 131}, {x: 32, y: 133}, {x: 196, y: 136}, {x: 105, y: 160}, {x: 27, y: 164}, {x: 164, y: 166}, {x: 75, y: 178}, // POPS 4 {x: 103, y: 24}, {x: 87, y: 26}, {x: 49, y: 31}, {x: 152, y: 35}, {x: 95, y: 56}, {x: 44, y: 69}, {x: 159, y: 70}, {x: 201, y: 78}, {x: 44, y: 110}, {x: 111, y: 117}, {x: 9, y: 131}, {x: 170, y: 139}, {x: 98, y: 146}, {x: 149, y: 165}, {x: 68, y: 166}, {x: 38, y: 179}, {x: 101, y: 179}, {x: 131, y: 202}, // POPS 3 {x: 151, y: 16}, {x: 126, y: 29}, {x: 65, y: 44}, {x: 110, y: 56}, {x: 59, y: 66}, {x: 178, y: 74}, {x: 7, y: 77}, {x: 150, y: 88}, {x: 187, y: 99}, {x: 20, y: 100}, {x: 52, y: 103}, {x: 169, y: 105}, {x: 3, y: 107}, {x: 97, y: 108}, {x: 34, y: 119}, {x: 204, y: 123}, {x: 109, y: 132}, {x: 20, y: 135}, {x: 118, y: 159}, {x: 57, y: 171}, {x: 89, y: 174}, {x: 174, y: 175}, {x: 143, y: 195}, // POPS 2 {x: 134, y: 9}, {x: 81, y: 10}, {x: 51, y: 20}, {x: 170, y: 30}, {x: 39, y: 36}, {x: 111, y: 42}, {x: 146, y: 43}, {x: 85, y: 50}, {x: 39, y: 59}, {x: 135, y: 65}, {x: 63, y: 75}, {x: 191, y: 76}, {x: 36, y: 77}, {x: 196, y: 91}, {x: 38, y: 94}, {x: 107, y: 106}, {x: 86, y: 109}, {x: 121, y: 113}, {x: 165, y: 121}, {x: 30, y: 148}, {x: 108, y: 149}, {x: 129, y: 155}, {x: 64, y: 157}, {x: 139, y: 157}, {x: 97, y: 167}, {x: 37, y: 169}, {x: 111, y: 171}, {x: 47, y: 174}, {x: 169, y: 182}, {x: 110, y: 186}, {x: 71, y: 188} ], nucubucTime: function() { var i, currentPoint var offset = 420/4 for (i = 0; i < this.points.length; i++) { currentPoint = this.points[i] currentPoint.originalX = Pops.nucubuc[i].x + offset currentPoint.originalY = Pops.nucubuc[i].y + offset } }, love: [ // POPS 14 {x: 170, y: 50}, {x: 150, y: 181}, // POPS 12 {x: 69, y: 22}, {x: 127, y: 47}, {x: 22, y: 63}, {x: 183, y: 118}, {x: 107, y: 169}, {x: 48, y: 151}, {x: 76, y: 194}, // POPS 10 {x: 118, y: 10}, {x: 49, y: 48}, {x: 45, y: 81}, {x: 170, y: 89}, {x: 17, y: 115}, {x: 186, y: 151}, {x: 50, y: 183}, // POPS 7 {x: 96, y: 9}, {x: 138, y: 22}, {x: 98, y: 39}, {x: 86, y: 56}, {x: 192, y: 62}, {x: 150, y: 65}, {x: 21, y: 85}, {x: 7, y: 93}, {x: 137, y: 140}, {x: 203, y: 102}, {x: 158, y: 111}, {x: 44, y: 114}, {x: 124, y: 196}, {x: 16, y: 148}, {x: 161, y: 129}, {x: 60, y: 122}, {x: 167, y: 161}, {x: 100, y: 203}, // POPS 5 {x: 162, y: 23}, {x: 114, y: 31}, {x: 80, y: 41}, {x: 30, y: 45}, {x: 147, y: 49}, {x: 187, y: 86}, {x: 85, y: 145}, {x: 131, y: 165}, {x: 30, y: 101}, {x: 124, y: 180}, {x: 145, y: 126}, {x: 37, y: 129}, {x: 197, y: 136}, {x: 72, y: 133}, {x: 27, y: 164}, {x: 152, y: 153}, {x: 65, y: 173}, // POPS 4 {x: 103, y: 23}, {x: 89, y: 25}, {x: 51, y: 30}, {x: 151, y: 31}, {x: 105, y: 66}, {x: 60, y: 65}, {x: 164, y: 71}, {x: 201, y: 78}, {x: 42, y: 100}, {x: 123, y: 146}, {x: 9, y: 131}, {x: 168, y: 145}, {x: 85, y: 169}, {x: 138, y: 154}, {x: 68, y: 151}, {x: 34, y: 176}, {x: 96, y: 154}, {x: 138, y: 200}, // POPS 3 {x: 151, y: 16}, {x: 126, y: 28}, {x: 64, y: 40}, {x: 115, y: 60}, {x: 69, y: 51}, {x: 179, y: 73}, {x: 7, y: 77}, {x: 156, y: 79}, {x: 187, y: 99}, {x: 20, y: 100}, {x: 51, y: 95}, {x: 170, y: 106}, {x: 3, y: 107}, {x: 85, y: 157}, {x: 32, y: 112}, {x: 204, y: 123}, {x: 100, y: 188}, {x: 20, y: 135}, {x: 109, y: 194}, {x: 73, y: 163}, {x: 62, y: 138}, {x: 181, y: 171}, {x: 171, y: 174}, // POPS 2 {x: 134, y: 9}, {x: 82, y: 9}, {x: 51, y: 20}, {x: 170, y: 30}, {x: 39, y: 32}, {x: 109, y: 49}, {x: 143, y: 38}, {x: 99, y: 56}, {x: 39, y: 61}, {x: 136, y: 61}, {x: 71, y: 61}, {x: 192, y: 76}, {x: 48, y: 65}, {x: 197, y: 91}, {x: 33, y: 90}, {x: 116, y: 154}, {x: 54, y: 168}, {x: 115, y: 186}, {x: 178, y: 136}, {x: 30, y: 140}, {x: 126, y: 155}, {x: 152, y: 141}, {x: 50, y: 129}, {x: 143, y: 163}, {x: 76, y: 142}, {x: 29, y: 150}, {x: 115, y: 205}, {x: 38, y: 168}, {x: 171, y: 183}, {x: 90, y: 180}, {x: 78, y: 177} ], loveTime: function() { var i, currentPoint var offset = 420/4 for (i = 0; i < this.points.length; i++) { currentPoint = this.points[i] currentPoint.originalX = Pops.love[i].x + offset currentPoint.originalY = Pops.love[i].y + offset } }, rdm: function(from, to) { return Math.floor(Math.random() * (to - from + 1) + from) }, updatePoints: function() { var i, currentPoint, theta, distance for (i = 0; i < this.points.length; i++) { currentPoint = this.points[i] theta = Math.atan2(currentPoint.y - this.mouse.y, currentPoint.x - this.mouse.x) if (this.mouse.down) { distance = this.reactionSensitivity * 200 / Math.sqrt((this.mouse.x - currentPoint.x) * (this.mouse.x - currentPoint.x) + (this.mouse.y - currentPoint.y) * (this.mouse.y - currentPoint.y)) } else { distance = this.reactionSensitivity * 100 / Math.sqrt((this.mouse.x - currentPoint.x) * (this.mouse.x - currentPoint.x) + (this.mouse.y - currentPoint.y) * (this.mouse.y - currentPoint.y)) } currentPoint.x += Math.cos(theta) * distance + (currentPoint.originalX - currentPoint.x) * 0.05 currentPoint.y += Math.sin(theta) * distance + (currentPoint.originalY - currentPoint.y) * 0.05 } }, drawPoints: function() { var i, currentPoint for (i = 0; i < this.points.length; i++) { currentPoint = this.points[i] this.context.fillStyle = 'rgba('+currentPoint.color+','+currentPoint.opacityDelay+')' if(currentPoint.opacityDelay < 1) currentPoint.opacityDelay = currentPoint.opacityDelay + 0.025 this.context.strokeStyle = 'rgb('+currentPoint.color+')' this.context.beginPath() this.context.arc(currentPoint.x, currentPoint.y, currentPoint.radius ,0 , Math.PI*2, true) this.context.closePath() this.context.fill() } }, draw: function() { this.animation = requestAnimationFrame(function() { Pops.draw() }) this.clear() this.updatePoints() this.drawPoints() }, clear: function() { this.canvas.width = this.canvas.width }, mouseDown: function(event) { Pops.mouse.down = true }, mouseUp: function(event) { Pops.mouse.down = false }, mouseMove: function(event) { for (var i = 0; i < Pops.points.length; i++) { $(Pops.points[i]).stop() } Pops.mouse.x = event.offsetX || (event.layerX - Pops.canvas.offsetLeft) Pops.mouse.y = event.offsetY || (event.layerY - Pops.canvas.offsetTop) Pops.mouse.move = true }, mouseOut: function(event) { Pops.mouse.x = -1000 Pops.mouse.y = -1000 Pops.mouse.down = false Pops.mouse.move = false } } Pops.init() $('#popsShape input').on('change', function() { var value= $('#popsShape input:checked').val() if(value== 'nucubuc') Pops.nucubucTime() else if(value== 'love') Pops.loveTime() })
粒子
时间
文字
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号