帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 鼠标悬停彩色烟花效果
鼠标悬停彩色烟花效果
浏览:620次
-
评论:0次
-
发布时间:2017-05-19
Html
Css
Js
#bg { background:black; }
$(function() { var c = $('#bg').get(0); var ctx = c.getContext('2d'); var W = c.width = window.innerWidth; var H = c.height = window.innerHeight; var OX = W / 2; var OY = H / 2; var particle = function(x, y) { this.initx = x; this.inity = y; this.x = x; this.y = y; this.ox = x; this.oy = y; this.life = Math.round(Math.random() * 20); this.vx = Math.random() * 2 - 1; this.vy = Math.random() * 2 - 1; this.color = Math.random() * 360; this.alpha = Math.random(); this.lineWidth = Math.random() * 4; } particle.prototype = { constructor: particle, update: function() { this.ox = this.x; this.oy = this.y; this.x += this.vx; this.y += this.vy; var rx = this.x - this.initx; var ry = this.y - this.inity; var r = Math.sqrt(rx * rx + ry * ry); if (this.life < 0 || r > 50 || this.alpha < 0.1) { this.x = this.ox = this.initx; this.y = this.oy = this.inity; this.life = Math.round(Math.random() * 5000); this.vx = Math.random() * 2 - 1; this.vy = Math.random() * 2 - 1; this.color = Math.random() * 360; this.alpha = Math.random(); } this.life -= 1; }, render: function(ctx) { ctx.save(); ctx.globalAlpha = 0.98; ctx.lineWidth = this.lineWidth; ctx.strokeStyle = 'hsla(' + (this.color) + ', 100%, 50%, ' + this.alpha + ')'; ctx.beginPath(); ctx.moveTo(this.ox, this.oy); ctx.lineTo(this.x, this.y); ctx.stroke(); ctx.restore(); } } var particles = []; requestAnimationFrame(function loop() { requestAnimationFrame(loop); ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, W, H); ctx.globalCompositeOperation = 'lighter'; if (particles.length < 250) { var Particle = new particle(X, Y) particles.push(Particle); } for (var i = 0; i < 250; i++) { particles[i].update() particles[i].render(ctx); } }) var X; var Y; $('#bg').mousemove(function(e) { X = e.pageX; Y = e.pageY; particles.length = 0; }) })
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
2.1.4
<!doctype html><html><head><meta charset="utf-8"><title>鼠标悬停彩色烟花效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:鼠标悬停彩色烟花效果
CS3炫酷六边体旋转立体相册
jQuery手风琴展示
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
620
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值