javascript特效——烟花燃放的效果[xyytit]
浏览数：32 /
时间：2015年06月09日
春节临近，要做活动促销专题页面，百度了下，找到一些烟花燃放的特效，整理并添加了修改烟花各种参数的注释，便于大家修改使用，版权归原作者所有。
2. Html代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <script type="text/javascript" src="firework.js"></script> 8 9 <script type="text/javascript"> 10 11 function test() { 12 13 var fireworks=[]; 14 15 var total=15; 16 //控制烟花散开的频率 17 window.setInterval(function () { 18 19 for (var i = 0; i < total; i++) { 20 21 if (!fireworks[i] || !fireworks[i].parentElement) { 22 23 var x = Utils.getIntervalRandom(50, document.body.offsetWidth - 50); 24 25 var shotHeight = Utils.getIntervalRandom(100, 450);//控制烟花散开的高度范围 26 27 var radius = Utils.getIntervalRandom(50, 200);//控制烟花散开的半径 28 29 var particleCount = Utils.getIntervalRandom(20, 100);//烟花散开的子点数 30 31 var speed = Utils.getIntervalRandom(10, 200);//烟花散开的速度 32 33 var color = "#" + Utils.getIntervalRandom(0, 16777215).toString(16).padLeft(6, "f");//控制烟花的颜色 34 35 var size = Utils.getIntervalRandom(1, 28); //自定义添加烟花大小 36 37 fireworks[i] = new Firework(x, shotHeight, radius, particleCount, color, speed, size); 38 39 } 40 41 } 42 43 }, 100); 44 45 46 //控制烟花燃放的频率 47 window.setInterval(function(){ 48 49 var currentIndex=Utils.getIntervalRandom(0,total); 50 51 if(fireworks[currentIndex] && fireworks[currentIndex].parentElement && !fireworks[currentIndex].isShoted){ 52 53 fireworks[currentIndex].shot(); 54 55 } 56 },200);//控制烟花燃放速度，值越小，烟花越多 57 58 } 59 </script> 60 61 </head> 62 63 <body bgColor="#000000" onload="test();"> 64 65 <div style="width:100%;text-align:center;font:100px ‘Comic Sans MS‘,Arial,sans-serif;color:yellow;">Happy New Year</div> 66 67 <div style="width:100%;text-align:center;font:100px ‘Comic Sans MS‘,Arial,sans-serif;color:red;">祝大家新年快乐！</div> 68 </body> 69 70 </html>
3. javascript代码：
1 var Utils={}; 2 3 Utils.$E=function(id){ 4 5 return document.getElementById(id); 6 }; 7 8 Utils.$C=function(tagName){ 9 10 return document.createElement(tagName); 11 }; 12 13 Utils.getIntervalRandom=function(min,max){ 14 15 return parseInt(Math.random()*(max-min)+min); 16 17 }; 18 19 Utils.INTERVAL_SPEED=30;//烟花上升速度，值越大，上升越慢 20 21 if(navigator.appName.toLowerCase().indexOf("netscape")!=-1) 22 { 23 Utils.INTERVAL_SPEED=Utils.INTERVAL_SPEED+(Utils.INTERVAL_SPEED/6); 24 } 25 26 String.prototype.padLeft=function(sLen,padChar){ 27 var result=this; 28 for(i=this.length;i<sLen;i++){ 29 result=padChar+result; 30 } 31 return result; 32 }; 33 34 35 var Firework = function (x, shotHeight, radius, particleCount, color, speed, size) { 36 37 this.shotHeight = shotHeight || 200; 38 39 this.radius = radius || 100; 40 41 this.particleCount = particleCount || 10; 42 43 this.color = color || "#FFffff"; 44 45 this.parentElement = document.body; 46 47 this.x = x; 48 49 this.shottingSpeed = speed || 3; 50 51 this.isShoted = false; 52 53 this.isFlash = true;//是否有闪屏 54 55 this.size = size;//自定义添加烟花大小尺寸 56 57 58 59 60 this._particles = []; 61 62 this._particleShape = unescape("•");//烟花显示的内容 63 64 this._shottingShape = "|"; 65 66 this._depth = 3; 67 68 this._shotting = Utils.$C("div"); 69 70 this._flashing = Utils.$C("div"); 71 72 this._disposeCount = 0; 73 74 75 76 var _this = this; 77 78 79 80 void function initialize() { 81 82 for (var i = 0; i < _this.particleCount; i++) { 83 84 _this._particles[i] = Utils.$C("div"); 85 86 _this._particles[i].style.position = "fixed"; 87 88 _this._particles[i].style.left = _this.x + "px"; 89 90 _this._particles[i].style.top = _this.shotHeight + "px"; 91 92 _this._particles[i].style.zIndex = 100; 93 94 _this._particles[i].style.color = _this.color; 95 96 _this._particles[i].style.display = "none"; 97 98 _this._particles[i].innerHTML = _this._particleShape; 99 100 _this._particles[i].distance = Utils.getIntervalRandom(1, _this.radius - parseInt((i % _this._depth) * (_this.radius / _this._depth))); 101 102 _this._particles[i].speed = Utils.getIntervalRandom(1, 4) * _this._particles[i].distance * 0.06; 103 104 _this.parentElement.appendChild(_this._particles[i]); 105 106 _this._setSize(_this._particles[i], _this.size); 107 108 } 109 110 111 112 _this._shotting.speed = _this.shottingSpeed; 113 114 _this._shotting.innerHTML = _this._shottingShape; 115 116 _this._shotting.style.position = "fixed"; 117 118 _this._shotting.style.fontWeight = "900"; 119 120 _this._shotting.style.left = _this.x + "px"; 121 122 //_this._shotting.style.top=_this.parentElement.offsetTop+_this.parentElement.offsetHeight-_this._shotting.offsetHeight+"px"; 123 124 _this._shotting.style.top = "700px"; 125 126 _this._shotting.style.zIndex = 100; 127 128 _this._shotting.style.color = _this.color; 129 130 _this._setSize(_this._shotting, 15); 131 132 _this.parentElement.appendChild(_this._shotting); 133 134 135 136 _this._flashing.style.width = "100%"; 137 138 _this._flashing.style.height = "100%"; 139 140 _this._flashing.style.left = "0"; 141 142 _this._flashing.style.top = "0"; 143 144 _this._flashing.style.backgroundColor = "#ffffee"; 145 146 _this._flashing.style.position = "fixed"; 147 148 _this._flashing.style.zIndex = 200; 149 150 _this._flashing.style.display = "none"; 151 152 _this._flashing.style.MozOpacity = 0.5; 153 154 _this._flashing.style.filter = "alpha(opacity=50)"; 155 156 _this.parentElement.appendChild(_this._flashing); 157 158 159 160 } (); 161 162 }; 163 164 165 166 Firework.prototype.shot=function(){ 167 168 var _this=this; 169 170 _this.isShoted=true; 171 172 var shotInterval=window.setInterval(function(){ 173 174 if(parseInt(_this._shotting.style.top)>_this.shotHeight){ 175 176 _this._shotting.style.top=parseInt(_this._shotting.style.top)-_this._shotting.speed+"px"; 177 178 } 179 180 else{ 181 182 window.clearInterval(shotInterval); 183 184 _this.parentElement.removeChild(_this._shotting); 185 186 _this.bomb(); 187 188 _this._shotting=null; 189 190 } 191 192 },Utils.INTERVAL_SPEED); 193 194 }; 195 196 197 198 Firework.prototype.bomb=function(){ 199 200 var _this=this; 201 202 if(_this.isFlash){ 203 204 _this._flashing.style.display=""; 205 206 var flashTimeout=window.setTimeout(function(){ 207 208 _this.parentElement.removeChild(_this._flashing); 209 210 window.clearTimeout(flashTimeout); 211 212 },10);//闪屏闪烁频率，值越小，闪烁越快 213 214 } 215 216 else{ 217 218 _this.parentElement.removeChild(_this._flashing); 219 220 } 221 222 223 224 for (var i = 0; i <_this._particles.length; i++) { 225 226 _this._moveParticle(_this._particles[i], Utils.getIntervalRandom(0,360)); 227 228 } 229 230 }; 231 232 233 234 Firework.prototype._setSize=function(obj,value){ 235 236 obj.style.fontSize=parseInt(value)+"px"; 237 238 }; 239 240 241 242 Firework.prototype._moveParticle=function(particle,angle){ 243 244 var _this=this; 245 246 var initX=parseInt(particle.style.left); 247 248 var initY=parseInt(particle.style.top); 249 250 var currentDistance=0; 251 252 var currentX=initX; 253 254 var currentY=initY; 255 256 particle.style.display=""; 257 258 259 260 particle.intervalId=window.setInterval(function(){ 261 262 if(currentDistance<particle.distance){ 263 264 var newX,newY; 265 266 var xAngle=angle*(2*Math.PI/360); 267 268 var xDirection=Math.abs(Math.cos(xAngle))/Math.cos(xAngle); 269 270 var yDirection=Math.abs(Math.sin(xAngle))/Math.sin(xAngle); 271 272 273 274 if(Math.abs(Math.tan(xAngle))<=1){ 275 276 var deltaX=Math.abs(particle.speed*Math.cos(xAngle))*xDirection; 277 278 newX=currentX+deltaX; 279 280 newY=-(newX-initX)*Math.tan(xAngle)+initY; 281 282 currentDistance+=Math.abs(deltaX); 283 284 } 285 286 else{ 287 288 var deltaY=Math.abs(particle.speed*Math.sin(xAngle))*yDirection; 289 290 newY=currentY-deltaY; 291 292 newX=-(newY-initY)/Math.tan(xAngle)+initX; 293 294 currentDistance+=Math.abs(deltaY); 295 296 } 297 298 currentX=newX; 299 300 currentY=newY; 301 302 particle.style.left=currentX+"px"; 303 304 particle.style.top=currentY+"px"; 305 306 } 307 308 else{ 309 310 window.clearInterval(particle.intervalId); 311 312 _this.parentElement.removeChild(particle); 313 314 particle=null; 315 316 if(++_this._disposeCount==_this.particleCount){ 317 318 _this._particles.length=0; 319 320 _this.parentElement=null; 321 322 _this=null; 323 324 } 325 326 } 327 328 },Utils.INTERVAL_SPEED); 329 330 331 };
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
