100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > JavaScript实现的简单烟花特效代码【javascript】

JavaScript实现的简单烟花特效代码【javascript】

时间:2024-06-08 22:16:50

相关推荐

JavaScript实现的简单烟花特效代码【javascript】

web前端|js教程

JavaScript,烟花特效

web前端-js教程

许愿网站源码,vscode怎么去重,ubuntu 按键重启,tomcat创建jsp项目,政策爬虫,php定义编码,seo综合查询工具盘点,茶叶网站asp模板,织梦财税公司模板lzw

这是一款JavaScript烟花特效,过年的时候放到你的网页上祝贺大家牛年大吉吧,是不是很不错?

qt时钟源码,vscode插件调试,ubuntu xsdk,tomcat总是卡住,sqlite删除全部数据,二次开发的软件 插件,微信前端快速开发框架,爬虫软件安装教程高清,php 数组 显示,seo不能优化吗,开放源代码的网站,网页相册滚动代码,网站界面模板下载lzw

运行效果截图如下:

交报表网站源码,ubuntu 无法重启网卡,手工制作爬虫箱,php 点位图,seo的内部lzw

在线演示地址如下:

/js//js-yh-explode-style-demo/

具体代码如下:

礼花特效html,body{background:#000; height:100%; margin:0px; padding:0px;color:#FFF;} .ball{color:#FF0000; position:absolute; font-size:16px;} .star{color:#FF0000; position:absolute; font-size:4px;}function Fireworks(sky, loop){ this.sky = sky; this.skyWidth = document.body.clientWidth || document.documentElement.clientWidth; this.skyHeight= document.body.clientHeight || document.documentElement.clientHeight; this.x = this.y = 0; this.step = 20; this.delay = 30; this.stars = []; this.r = 10; this.step2 = 7; this.radius = 90; this.angle = 45; this.num = 16; this.loop = loop; this.degree = 2; this.t = 0; this.delt = 0; this.max = 30; this.cur = 1; this.points = null;}Fireworks.prototype = { init : function(){ this.x = parseInt(this.skyWidth/1.3 * Math.random()) + this.skyWidth / 8; this.y = this.skyHeight; this._y = parseInt((this.skyHeight / 4) * Math.random()) + this.skyHeight / 5; }, setOpacity : function(obj, p){ if(p > 85){ var opacity = 100 - (p - 85) * 4; if(document.all){ obj.style.filter = "alpha(opacity=" + opacity + ")"; }else{ obj.style.MozOpacity = opacity / 100; } } }, getNextPoint : function(degree, coeff, t){ var tt = 1.0 - t; for(var rr = 1; rr <= degree; rr++){ for(var i=0; i this._y){ var p = parseInt((this.skyHeight - this.y) / (this.skyHeight - this._y)*10); this.y -= (this.step - p * 1.6); this.ball.style.fontSize = 16 - p + "px"; this.ball.style.top = this.y + "px"; setTimeout(function(){self.moveBall();}, this.delay); }else{ this.fire(); } }, hideBall : function(){ this.sky.removeChild(this.ball); this.ball = null; }, showStars : function(){ var colors = [#FF0000,#FF00FF,#00FF00,#00FFFF,#FFFF00,#FF0000,#FF00FF,#00FF00,#00FFFF,#FFFF00]; var n = cs = parseInt(Math.random() * colors.length / 2); var cc = parseInt(Math.random() * colors.length / 2); var colorMode = parseInt(Math.random() * 2); var star = Math.round(Math.random()) == 1 ? "★" : "☆"; this.r = 10; this.radius = Math.round(Math.random() * 30) + 60; this.num = Math.round(Math.random() * 5 + 5) * 2; this.angle = 180 / this.num * 2; for(var i=1; i cs + cc)n = cs; }else{ this.stars[i].style.color = colors[parseInt(Math.random() * colors.length)]; } this.sky.appendChild(this.stars[i]); } }, moveStars : function(){ var self = this; if(this.r < this.radius){ var p = this.step2 - parseInt(this.r / this.radius * 5); p = p < 1 ? 1 : p; this.r += p; p = parseInt(this.r / this.radius * 100); for(var i=1; i<=this.num; i++){ this.stars[i].style.left = this.x - Math.round(this.r * Math.sin(Math.PI - (Math.PI / 180 * this.angle * i))) + "px"; this.stars[i].style.top = this.y - Math.round(this.r * Math.cos(Math.PI - (Math.PI / 180 * this.angle * i))) + "px"; this.stars[i].style.fontSize = 4 + p/10 + "px"; this.setOpacity(this.stars[i], p); } setTimeout(function(){self.moveStars();}, this.delay); }else{ setTimeout(function(){self.hideStars();}, 200 * Math.random()); } }, initBezier : function(){ var coeff_x = []; var coeff_y = []; this.points = []; this.t = 0; this.delt = 1.0 / this.max; this.cur = 1; var a = parseInt(Math.random() * 5) * 90; coeff_x[0] = this.x; coeff_y[0] = this.y; for(var i=1; i<=this.num; i++){ coeff_x[1] = this.x + Math.sin(Math.PI - (Math.PI / 180 * this.angle * i)) * this.radius/2; coeff_y[1] = this.y + Math.cos(Math.PI - (Math.PI / 180 * this.angle * i)) * this.radius/2; coeff_x[2] = this.x + Math.sin(Math.PI - (Math.PI / 180 * (a-this.angle * i))) * this.radius; coeff_y[2] = this.y + Math.cos(Math.PI - (Math.PI / 180 * (a-this.angle * i))) * this.radius; this.points[(i-1)*2] = coeff_x.slice(0); this.points[(i-1)*2+1] = coeff_y.slice(0); } }, moveStars2 : function(){ var self = this; if(this.cur < this.max){ this.t += this.delt; this.cur++; p = parseInt(this.cur / this.max * 100); for(var i=1; i<=this.num; i++){ this.stars[i].style.left = this.getNextPoint(this.degree, this.points[(i-1)*2], this.t) + "px"; this.stars[i].style.top = this.getNextPoint(this.degree, this.points[(i-1)*2+1], this.t) + "px"; this.stars[i].style.fontSize = 4 + p/10 + "px"; this.setOpacity(this.stars[i], p); } setTimeout(function(){self.moveStars2();}, this.delay); }else{ setTimeout(function(){self.hideStars();}, 200 * Math.random()); } }, hideStars : function(){ for(var i=1; i<=this.num; i++){ this.sky.removeChild(this.stars[i]); this.stars[i] = null; if(this.points != null){ delete this.points[(i-1)*2]; delete this.points[(i-1)*2+1]; } } if(this.points){ delete this.points; } this.points = null; if(this.loop){ this.play(); } }, fire : function(){ this.hideBall(); this.showStars(); var effect = parseInt(Math.random() * 2) + 1; switch(effect){ case 1: this.moveStars(); break; case 2: this.initBezier(); this.moveStars2(); break; } }, play : function(){ this.init(); this.showBall(); this.moveBall(); }};window.onload = function(){ for(var i=0; i<5; i++) new Fireworks(document.body, true).play();};

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。