Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
html, body { margin: 0; padding: 0; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; overflow: hidden; /* Disable scrollbars */ display: block; cursor: crosshair; /* No floating content on sides */ } canvas { background: #76b852; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #8DC26F, #76b852); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #8DC26F, #76b852); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }
JavaScript
var cv = document.getElementById("mycanvas"); var ctx = cv.getContext('2d'); var radius = 8; var blur = 50; var colorClient; var timeDelete = 500; // 0.5 seconds var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; function resizeCanvas() { cv.width = window.innerWidth; cv.height = window.innerHeight; ctx.canvas.width = cv.width; ctx.canvas.height = cv.height; } var dy = 0.5; var blocks = []; function Block(x, y, color) { this.x = parseFloat(x); this.y = parseFloat(y); this.color = color; this.delete = false; this.radius = 0; var self = this; this.update = function() { if (this.delete) { if (this.y < (100 + radius)) { this.y += dy; } else { var index = blocks.indexOf(self); delete blocks[index]; } } if (this.radius < radius) { this.radius += 1; } } this.render = function() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.shadowColor = this.color; ctx.shadowBlur = blur; ctx.arc(PctoPx(cv.width, this.x), PctoPx(cv.height, this.y), this.radius, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); } setTimeout(function() { self.delete = true; }, timeDelete); } function PxtoPc(wrapper, pc) { return parseFloat(pc / wrapper * 100).toFixed(2); } function PctoPx(wrapper, px) { return (wrapper / 100) * px; } function draw() { ctx.clearRect(0, 0, cv.width, cv.height); blocks.forEach(function(e) { e.update(); e.render(); }); }; function animated() { requestAnimationFrame(animated); draw(); ctx.font = "30px monospace"; ctx.fillStyle = "white"; ctx.textAlign = "center"; ctx.shadowBlur = 0; ctx.fillText("Move!", cv.width / 2, cv.height / 2); ctx.font = "14px monospace"; ctx.textAlign = "center"; ctx.fillText("Click for change color", cv.width / 2, cv.height / 1.7); } resizeCanvas(); animated(); function addBlock(data) { blocks.push(new Block(data.x, data.y, data.color)); } var colors = [ '#03a9f4', '#f44336', '#e91e63', '#ff9800', '#3f51b5' ]; var indexColor = 0; colorClient = colors[indexColor]; cv.addEventListener('click', function(e) { if(indexColor < colors.length - 1){ indexColor += 1; }else{ indexColor = 0; } colorClient = colors[indexColor]; }) window.addEventListener('resize', resizeCanvas, false); cv.addEventListener('mousemove', function(e) { var xPercent = PxtoPc(cv.width, e.clientX); var yPercent = PxtoPc(cv.height, e.clientY); addBlock({ x: xPercent, y: yPercent, color: colorClient }); }, false);
粒子
时间
文字
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号