教学 ♥ 烟花爆发的效果
27 June 2012 @ 10:51 PM



转帖请留言和附上链接 ♥









步骤一

Blogger Template : Design - Edit html

Blogskin : Template - Edit html


步骤二

用 ctrl + f 找 :
</head>


步骤三

在 </head> 上面放 :

<script type="text/javascript">
// <![CDATA[
var bits=100; // how many bits
var intensity=7; // how 'powerful' is the explosion (from 3 to 10 is best)
var speed=20; // how fast - smaller is faster
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");
//                     blue    red     green   purple  cyan    orange

/**************************** 
*      Fireworks Effect     * 
*(c) 2004-6 mf2fm web-design* 
*  http://www.mf2fm.com/rv  * 
* DON'T EDIT BELOW THIS BOX * 
****************************/ 
var dx, xpos, ypos, bangheight; 
var Xpos=new Array(); 
var Ypos=new Array(); 
var dX=new Array(); 
var dY=new Array(); 
var decay=new Array(); 
var colour=0; 
var swide=800; 
var shigh=600;
function write_fire() { 
  var b, s; 
  b=document.createElement("div");
  s=b.style; 
  s.position="absolute"; 
  b.setAttribute("id", "bod"); 
  document.body.appendChild(b); 
  set_scroll(); 
  set_width(); 
  b.appendChild(div("lg", 3, 4)); 
  b.appendChild(div("tg", 2, 3)); 
  for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1)); 
}
function div(id, w, h) { 
  var d=document.createElement("div");
  d.style.position="absolute"; 
  d.style.overflow="hidden"; 
  d.style.width=w+"px"; 
  d.style.height=h+"px"; 
  d.setAttribute("id", id); 
  return (d); 
}
function bang() { 
  var i, X, Y, Z, A=0; 
  for (i=0; i<bits; i++) { 
    X=Math.round(Xpos[i]); 
    Y=Math.round(Ypos[i]); 
    Z=document.getElementById("bg"+i).style; 
    if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) { 
      Z.left=X+"px"; 
      Z.top=Y+"px";
    } 
    if ((decay[i]-=1)>14) { 
      Z.width="3px"; 
      Z.height="3px"; 
    } 
    else if (decay[i]>7) { 
      Z.width="2px"; 
      Z.height="2px"; 
    }

    else if (decay[i]>3) { 
      Z.width="1px"; 
      Z.height="1px"; 
    }

    else if (++A) Z.visibility="hidden"; 
    Xpos[i]+=dX[i]; 
    Ypos[i]+=(dY[i]+=1.25/intensity); 
  } 
  if (A!=bits) setTimeout("bang()", speed); 
} 
  
function stepthrough() { 
  var i, Z; 
  var oldx=xpos; 
  var oldy=ypos; 
  xpos+=dx; 
  ypos-=4; 
  if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) { 
    for (i=0; i<bits; i++) { 
      Xpos[i]=xpos; 
      Ypos[i]=ypos; 
      dY[i]=(Math.random()-0.5)*intensity; 
      dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25; 
      decay[i]=Math.floor((Math.random()*16)+16); 
      Z=document.getElementById("bg"+i).style; 
      Z.backgroundColor=colours[colour]; 
      Z.visibility="visible"; 
    } 
    bang(); 
    launch(); 
  } 
  document.getElementById("lg").style.left=xpos+"px"; 
  document.getElementById("lg").style.top=ypos+"px"; 
  document.getElementById("tg").style.left=oldx+"px"; 
  document.getElementById("tg").style.top=oldy+"px"; 
}
function launch() { 
  colour=Math.floor(Math.random()*colours.length); 
  xpos=Math.round((0.5+Math.random())*swide*0.5); 
  ypos=shigh-5; 
  dx=(Math.random()-0.5)*4; 
  bangheight=Math.round((0.5+Math.random())*shigh*0.4); 
  document.getElementById("lg").style.backgroundColor=colours[colour];
  document.getElementById("tg").style.backgroundColor=colours[colour];
}
window.onscroll=set_scroll;
function set_scroll() { 
  var sleft, sdown;
  if (typeof(self.pageYOffset)=="number") { 
    sdown=self.pageYOffset; 
    sleft=self.pageXOffset; 
  } 
  else if (document.body.scrollTop || document.body.scrollLeft) { 
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft; 
  } 
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { 
    sleft=document.documentElement.scrollLeft; 
    sdown=document.documentElement.scrollTop; 
  } 
  else { 
    sdown=0; 
    sleft=0; 
  } 
  var s=document.getElementById("bod").style; 
  s.top=sdown+"px"; 
  s.left=sleft+"px"; 
}
window.onresize=set_width; 
function set_width() { 
  if (typeof(self.innerWidth)=="number") { 
    swide=self.innerWidth; 
    shigh=self.innerHeight; 
  } 
  else if (document.documentElement && document.documentElement.clientWidth) { 
    swide=document.documentElement.clientWidth; 
    shigh=document.documentElement.clientHeight; 
  } 
  else if (document.body.clientWidth) { 
    swide=document.body.clientWidth; 
    shigh=document.body.clientHeight; 
  } 
}
window.onload=function() { if (document.getElementById) { 
  set_width(); 
  write_fire(); 
  launch(); 
  setInterval('stepthrough()', speed); 
}} 
// ]]> 
</script>


步骤四

预览效果 , 
没问题就保存 Save .







任何疑问请在 tagboard 留言 .

在评论箱留言请告诉我 (:




版权所有 翻印必究. ♥