新年新气象 为你的WordPress博客添加新年礼花特效

2014年终于来了,给咱的WordPress博客添加个新年礼花特效,希望新的一年里所有来访垃圾站[www.lajiz.cn]博客的朋友家庭和和美美,一切事事顺心,事业马到成功!

预览图,博主截图水平不太好,想看真实效果最好自己测试!

教程简介:

首先,在主题目录下新建javascripts目录,再在javascripts目录建立 lajiz.js 文件,将下面代码复制进去:

// <![CDATA[
var bits=80; // how many bits
var speed=33; // how fast - smaller is faster
var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cf", "#f93", "#f0c");
//                     blue    red     green   purple  cyan    orange  pink

/****************************
*      Fireworks Effect     *
*(c)2004-2014 lajiz web-design*
*  http://www.lajiz.cn  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var bangheight=new Array();
var intensity=new Array();
var colour=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var swide=800;
var shigh=600;
var boddie;

window.onload=function() { if (document.getElementById) {
  var i;
  boddie=document.createElement("div");
  boddie.style.position="fixed";
  boddie.style.top="0px";
  boddie.style.left="0px";
  boddie.style.overflow="visible";
  boddie.style.width="1px";
  boddie.style.height="1px";
  boddie.style.backgroundColor="transparent";
  document.body.appendChild(boddie);
  set_width();
  for (i=0; i<bangs; i++) {
    write_fire(i);
    launch(i);
    setInterval('stepthrough('+i+')', speed);
  }
}}

function write_fire(N) {
  var i, rlef, rdow;
  stars[N+'r']=createDiv('|', 12);
  boddie.appendChild(stars[N+'r']);
  for (i=bits*N; i<bits+bits*N; i++) {
    stars[i]=createDiv('*', 13);
    boddie.appendChild(stars[i]);
  }
}

function createDiv(char, size) {
  var div=document.createElement("div");
  div.style.font=size+"px monospace";
  div.style.position="absolute";
  div.style.backgroundColor="transparent";
  div.appendChild(document.createTextNode(char));
  return (div);
}

function launch(N) {
  colour[N]=Math.floor(Math.random()*colours.length);
  Xpos[N+"r"]=swide*0.5;
  Ypos[N+"r"]=shigh-5;
  bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);
  dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];
  if (dX[N+"r"]>1.25) stars[N+"r"].firstChild.nodeValue="/";
  else if (dX[N+"r"]<-1.25) stars[N+"r"].firstChild.nodeValue="\\";
  else stars[N+"r"].firstChild.nodeValue="|";
  stars[N+"r"].style.color=colours[colour[N]];
}

function bang(N) {
  var i, Z, A=0;
  for (i=bits*N; i<bits+bits*N; i++) {
    Z=stars[i].style;
    Z.left=Xpos[i]+"px";
    Z.top=Ypos[i]+"px";
    if (decay[i]) decay[i]--;
    else A++;
    if (decay[i]==15) Z.fontSize="7px";
    else if (decay[i]==7) Z.fontSize="2px";
    else if (decay[i]==1) Z.visibility="hidden";
    Xpos[i]+=dX[i];
    Ypos[i]+=(dY[i]+=1.25/intensity[N]);
  }
  if (A!=bits) setTimeout("bang("+N+")", speed);
}

function stepthrough(N) {
  var i, M, Z;
  var oldx=Xpos[N+"r"];
  var oldy=Ypos[N+"r"];
  Xpos[N+"r"]+=dX[N+"r"];
  Ypos[N+"r"]-=4;
  if (Ypos[N+"r"]<bangheight[N]) {
    M=Math.floor(Math.random()*3*colours.length);
    intensity[N]=5+Math.random()*4;
    for (i=N*bits; i<bits+bits*N; i++) {
      Xpos[i]=Xpos[N+"r"];
      Ypos[i]=Ypos[N+"r"];
      dY[i]=(Math.random()-0.5)*intensity[N];
      dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
      decay[i]=16+Math.floor(Math.random()*16);
      Z=stars[i];
      if (M<colours.length) Z.style.color=colours[i%2?colour[N]:M];
      else if (M<2*colours.length) Z.style.color=colours[colour[N]];
      else Z.style.color=colours[i%colours.length];
      Z.style.fontSize="13px";
      Z.style.visibility="visible";
    }
    bang(N);
    launch(N);
  }
  stars[N+"r"].style.left=oldx+"px";
  stars[N+"r"].style.top=oldy+"px";
}

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}
// ]]>

然后编辑主题目录 index.php 文件,在最后添加以下代码:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/lajiz.js"></script>

刷新博客首页,是不是看到礼花的特效了!

本文由垃圾站编辑整理,转载请保留本文地址:http://www.lajiz.cn/2235.html

本文固定链接: http://www.lajiz.cn/2235.html | 垃圾站

该文章由 sdujane 于2014年01月03日发表在 WP教程 分类下, 访客可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客!
原创文章,转载请注明: 新年新气象 为你的WordPress博客添加新年礼花特效 | 垃圾站
关键字:

新年新气象 为你的WordPress博客添加新年礼花特效:目前有9 条留言

  1. 5楼
    xiaomingtt:

    首页没看到啊

    2014-01-06 上午 8:36 [回复]
    • 已经去掉了,代码太多影响网站加载速度~

      2014-01-06 上午 9:38 [回复]
  2. 4楼
    旅行者:

    这代码也恁长了吧

    2014-01-05 下午 7:12 [回复]
    • 略长略长,幸好只是新建一个单独文件,不怕添加错位置~

      2014-01-06 上午 9:39 [回复]
  3. 地板
    建站网:

    太花俏了

    2014-01-04 下午 7:18 [回复]
    • 礼花效果看起来略简单啊……

      2014-01-04 下午 8:38 [回复]
  4. 板凳
    tennfy:

    大号

    2014-01-04 下午 12:23 [回复]
  5. 沙发
    tennfy:

    真心有点复杂

    2014-01-04 下午 12:22 [回复]
    • 类似于雪花效果之类的,原版教程写的有点乱,我修改的比较清楚了……

      2014-01-04 下午 8:33 [回复]

发表评论

快捷键:Ctrl+Enter