JavaScript实现的简单烟花特效代码1.15
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>礼花特效</title> <style type="text/css">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;} </style> <script type="text/javascript"> 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 <= degree-rr; i++){coeff[i] = tt * coeff[i] + t * coeff[i+1];}}return coeff[0];},showBall : function(){this.ball = document.createElement("div");this.ball.innerHTML = "●";this.ball.className = "ball";this.ball.style.left = this.x + "px";this.ball.style.top = this.y + "px";this.sky.appendChild(this.ball);},moveBall : function(){var self = this;if(this.y > 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<=this.num; i++){this.stars[i] = document.createElement("div");this.stars[i].innerHTML = star;this.stars[i].className = "star";if(colorMode == 1){this.stars[i].style.color = colors[n];if(++n > 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(); }; </script> </head> <body> </body> </html>
JavaScript实现的简单烟花特效代码1.15相关推荐
- JavaScript提示层漂浮js特效代码
下载地址 一款实用的JavaScript提示层漂浮特效代码,警告.提示.成功等,可以设置位置.基础调用Notify({ title: "Toast Message" });内容可以 ...
- 用JavaScript实现倒记时特效代码--Java自学网
<html> <head> <title>距离某事时间点的倒记时特效-JAVA:http://www.javalearns.com/</title> & ...
- 简单js特效代码大全_Django 功法大全
目录 什么是csrf? csrf原理 如何预防CSRF?1.提交验证码2.Referer Check3.token验证4.在HTTP头中自己定义属性并验证 form表单中如何通过csrf校验? AJA ...
- JavaScript屏幕保护网页js特效代码
下载地址 一个纯JavaScript库,使您能够在你的网站上设置屏幕保护程序.这个js插件可以检测到页面上的用户活动和空白的屏幕当用户已经闲置了一段时间. dd:
- 除夕跨年烟花特效[原创]
除夕跨年烟花特效[原创] 这是一个纯javascript除夕跨年烟花特效 体验入口:除夕跨年烟花 开源地址: https://gitee.com/Hauiteut/Spanning2022 烨拓科讯技 ...
- HTML5七夕情人节表白网页制作【HTML5庆祝生日蛋糕烟花特效】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- javascript做极简时钟特效,再简单没思路你也做不出来
点击查看时钟特效 极简主义,程序员javascript打造极简时钟特效 对于javascript特效的学习,重要的是逻辑思路,所以这个时钟特效不是很华丽,但是功能都展现出来了,而学习javascrip ...
- 文字动态发光特效代码简单实现
第一种方法: <html><head><title>文字动态发光特效代码</title></head><body bgcolor=&q ...
- 2022跨年烟花代码(六)HTML5鼠标点击页面放烟花特效
HTML5鼠标点击页面放烟花特效 html代码 <!DOCTYPE html> <html> <head><meta http-equiv="Con ...
最新文章
- AES加密解密算法Java实现
- 简书显示服务器错误,openfire服务器异常处理
- java exe 返回值_java调用exe返回值
- ICITR 2021 | 排序算法中的用户公平性、item公平性和多样性
- 隐藏oracle数据库,如何隐藏Oracle密码
- 来了!PostgreSQL 同步流复制原理和代码浅析,请签收
- Linux中进程正常退出return和exit()的区别
- 给一个函数求导MATLAB,matlab求导
- matlab 傅里叶变换代码,傅里叶变换的原理及matlab实现.doc
- EXCEL电子表格使用技巧大全
- 微信小程序实现定位(小白专用)
- ps修改证件照的底色
- Matlab UIAxes中添加图例
- 我们,让9300万人办事少跑一趟
- MySQL最全整理!java技术总监面试常见问题及答案
- 自我管理 - 希望2015年自己能够做到的几点目标
- Keil5 编译时显示..\OBJ\TPAD.axf: error: L6002U: Could not open file ..\obj\main.o: No such file or direct
- 【NLP】ESPNet语音识别——原理、实现过程
- 【STM32单片机】贪吃蛇游戏设计
- xp 英文版 安装后出现 中文乱码,解决方案。
热门文章
- 用edge调试安卓或者手机app的样式
- mysql是怎么实现多对多的_mysql复习篇及一对多和多对多的总结(17.6.26 )
- 一文带你看懂小程序朋友圈广告是什么
- java基于微信小程序校园二手闲置商品交易跳蚤市场 uniapp 小程序
- PHP jqGrid 表格数据更新帮助代码
- 拓嘉辰丰电商:如何投诉拼多多商家一直不发货
- turlebot3 ROS相关求助
- MAC下用F9-F12模拟PageUP/PageDown/HOME/END
- PHY以太网DP83848IVV/NOPB 工业温度、10/100-Mbps 以太网 PHY 收发器,支持 SNI 和 JTAG
- 百度网盘漏洞,2019年不限速方法,一直享受高速加速下载!