非常漂亮的js煙花效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)漂亮煙花效果的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html><html><head><meta charset='UTF-8'><title>煙花</title><style type='text/css'> div>div{ width:10px; height:10px; border-radius: 50%; position: absolute; top:900px; left:600px; background-color: red; } </style></head><body> <div id='box'><div id='start'></div></div></body><script type='text/javascript'> var sta = 800; var staa = 8; var startid = setInterval(function (){ start.style.top = (sta-=staa)+'px'; staa -=0.06; if(staa<=0.5){ clearInterval(startid); start.style.display='none'; za(); } },10); var g = 0.01; var lv = 0; var times = 0; var opa =1; function za(){ addiv(); var s2 = setInterval(function(){ lv+=g; for(var i=0;i<200;i++){ var elem = document.getElementById('d'+i); elem.style.left = (arrl[i]+=(arrv[i]*Math.cos(arrr[i])))+'px'; elem.style.top = (arrt[i]+=(arrv[i]*Math.sin(arrr[i])+lv))+'px'; elem.style.opacity= (opa-=0.00001); if(arrv[i]>0) arrv[i]-=0.001; else arrv[i]=0; } if(times++>=1000) clearInterval(s2); },10); } var arrr = []; var arrl = []; var arrt = []; var arrv = []; var arro = [] function addiv(){ for(var i=0;i<200;i++){ box.innerHTML+='<div id=’d'+i+'’></div>' arrl[i]=600; arrt[i]=sta; arrv[i]=Math.random()*2+0.1; arrr[i]=Math.random()*Math.PI*2; } } </script></html>
更多JavaScript精彩特效分享給大家:
Javascript菜單特效大全
javascript仿QQ特效匯總
JavaScript時(shí)鐘特效匯總
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. python web框架的總結(jié)2. Python如何進(jìn)行時(shí)間處理3. 詳解Python模塊化編程與裝飾器4. python使用ctypes庫(kù)調(diào)用DLL動(dòng)態(tài)鏈接庫(kù)5. html小技巧之td,div標(biāo)簽里內(nèi)容不換行6. 以PHP代碼為實(shí)例詳解RabbitMQ消息隊(duì)列中間件的6種模式7. python logging 重復(fù)寫日志問題解決辦法詳解8. Python中l(wèi)ogger日志模塊詳解9. python裝飾器三種裝飾模式的簡(jiǎn)單分析10. Python實(shí)現(xiàn)迪杰斯特拉算法過程解析
