Rumah > Artikel > hujung hadapan web > Kaedah Javascript untuk mencapai kemahiran effect_javascript bunga api latar belakang halaman web

Kaedah Javascript untuk mencapai kemahiran effect_javascript bunga api latar belakang halaman web

WBOYasal: 2016-05-16 15:46:391316semak imbas

Contoh dalam artikel ini menerangkan kaedah menggunakan JavaScript untuk mencapai kesan bunga api latar belakang pada halaman web. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Kesan khas letupan bunga api di latar belakang halaman web di sini, tidak perlu dikatakan, dilaksanakan dengan JS Ia berfungsi paling baik dengan latar belakang hitam, kesan bunga api yang berwarna-warni dan kesan bunga api bertaburan pada halaman web sebelum ini, dan yang ini serupa Tetapi kodnya lebih bersih.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Kod khusus adalah seperti berikut:

<html>
<head>
<title>背景的烟花效果</title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style></head>
<body>
<script language="JavaScript">
var col = new Array('#ffffff','#fff000','#ffa000','#ff00ff','#00ff00','#0000ff','#ff0000');
var p='<div id="rearDiv" style="position:absolute;top:0px;left:0px">';
var n=0;
for (i=0;i<14;++i){
 n++;
 if (n=(col.length-1)) n=0;
 p=p+'<div style="position:relative;width:1px;height:1px;background:'+col[n]+';font-size:3px">.</div>';
}
p=p+"</div>";
document.write(p);
var Clrs = new Array('ff0000','00ff00','000aff','ff00ff','ffa500','ffff00','00ff00','ffffff','fffff0');
var sClrs = new Array('ffa500','55ff66','AC9DFC','fff000','fffff0');
var peepY;
var peepX;
var step = 5;
var tallyStep = 0;
var backColor = 'ffa000';
var Mtop = 250;
var Mleft = 250;
function dissilient() {
 peepY = window.document.body.clientHeight/3;
 peepX = window.document.body.clientWidth/8;
 enlarge();
 tallyStep+= step;
 reduce();
 T=setTimeout("dissilient()",20);
}
function enlarge(){
 for ( i = 0 ; i < rearDiv.all.length ; i++ ) {
  var c=Math.round(Math.random()*(Clrs.length-1));
  if (tallyStep < 90)
   rearDiv.all[i].style.background=backColor;
  if (tallyStep > 90)
   rearDiv.all[i].style.background=Clrs[c];
  rearDiv.all[i].style.top = Mtop + peepY*Math.sin((tallyStep+i*5)/3)*Math.sin(550+tallyStep/100);
  rearDiv.all[i].style.left = Mleft + peepY*Math.cos((tallyStep+i*5)/3)*Math.sin(550+tallyStep/100);
 }
}
function reduce(){
 if (tallyStep == 220) {
  tallyStep = -10;
  var k=Math.round(Math.random()*(sClrs.length-1));
  backColor = sClrs[k];
  Dtop = window.document.body.clientHeight - 250;
  Dleft = peepX * 3.5;
  Mtop = Math.round(Math.random()*Dtop);
  Mleft = Math.round(Math.random()*Dleft);
  document.all.rearDiv.style.top = Mtop+document.body.scrollTop;
  document.all.rearDiv.style.left = Mleft+document.body.scrollLeft;
  if ((Mtop < 20) || (Mleft < 20)) {
  Mtop += 90;
  Mleft += 90;
 }
 }
}
dissilient();
</script>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js melaksanakan kemahiran jam randik mudah effect_javascriptArtikel seterusnya：js melaksanakan kemahiran jam randik mudah effect_javascript

Artikel berkaitan

Lihat lagi