无聊小站

milo问我：

我目前没有自己的blog，而且我觉得不要用无名氏来问问题比较好，这是我的问题：
如果我建立一个blog，我要怎么做才能够让blog的背景充满会动的心，星星，等等，就像这个blogger一样。

*milo原文是英文的，以上的是我照着原意翻译过来的，希望没错。*

我在试验中心2看了page source，那些星星和跟随着mouse的东西是javascript来的。在你的网站放一些javascript是不错的，不过尽量不要放，因为放太多的话，那你得web loading会很慢。
我不是写网站的高手，所以我尽我所能来回答你。而且我在这里写出这些code，希望站长不会介意。
以下这个code是for会跟着鼠标的流星，把它Copy and Paste在你得template里的‹body› ‹/body›之间。

‹Script Language=”JavaScript” ›
var speed=20,divTop=0,divLeft=0,angle=0,ypos=0,xpos=0,amount=13;
if (document.layers){
for (i = 0; i ‹ amount; i++)
{document.write(‘‹layer name=nsa’+i+’ top=0 left=0 width=’+i/3+’ height=’+i/3+’ bgcolor=#ffffff›‹/layer›’);}
window.captureEvents(Event.MOUSEMOVE);
function nsMouse(evnt){
xpos=evnt.pageX;ypos=evnt.pageY;
}
window.onMouseMove = nsMouse;
}
else if (document.all||document.getElementById){
document.write(‘‹div style=”position:absolute;top:0px;left:0px”›’);
document.write(‘‹div style=”position:relative”›’);
for (i = 0; i ‹ amount; i++)
{document.write(‘‹div id=k’+i+’ style=”position:absolute;top:0px;left:0px;width:’+i/3+’;height:’+i/3+’;background:#ffffff;font-size:’+i/3+’”›‹/div›’)}
document.write(‘‹/div›‹/div›’);
function iMouse(event){if(!event){event=window.event};xpos=event.clientX;ypos=event.clientY+(document.all?document.body.scrollTop:window.scrollY)}
document.onmousemove = iMouse;
}
function getAngle(){
Y = ypos – divTop;X = xpos – divLeft;angle = Math.round(Math.atan2(Y,X) * 180/Math.PI);
if (angle ‹ 0)angle += 360;
}
function bomb(){
if (document.all){
Yscroll=(document.all?document.body.scrollTop:window.scrollY);
ybase=Math.round(Math.random()*window.document.body.offsetHeight);xbase=Math.round(Math.random()*window.document.body.offsetWidth);
xxbase=window.document.body.offsetWidth-10;yybase=window.document.body.offsetHeight-10;
}
else {
Yscroll=window.pageYOffset;
ybase=Math.round(Math.random()*window.innerHeight);xbase=Math.round(Math.random()*window.innerWidth);
yybase=window.innerHeight-10;xxbase=window.innerWidth-10;
}
if ((xbase › 10 && xbase ‹ xxbase) && (ybase › 10 && ybase ‹ yybase))
bomb();
else
{
if ((divLeft › xpos-speed/1.5) && (divLeft ‹ xpos+speed/1.5) && (divTop ›= ypos-speed/1.5) && (divTop ‹= ypos+speed/1.5))
{divTop=ybase+Yscroll;divLeft=xbase;}
y = Math.round(speed*Math.sin(angle*Math.PI/180));x = Math.round(speed*Math.cos(angle*Math.PI/180));
divTop+=y;divLeft+=x;
getAngle();
T=setTimeout(‘bomb()’,20);
}
}
function Split(){
Clrs=new Array(‘fff000′,’ffffff’,'ffa500′)
var ntscp=document.layers,msie=function(id){return document.getElementById(id)};

if (document.layers){
for (i = 0; i ‹ amount; i++)
{
if (i ‹ amount-1)
{ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)].left}
else
{ntscp['nsa'+i].top=divTop;ntscp['nsa'+i].left=divLeft}
}
}
else if (document.all||document.getElementById){
for (i = 0; i ‹ amount; i++)
{
if (i ‹ amount-1)
{msie(“k”+i).style.top=msie(“k”+(i+1)).style.top;msie(“k”+i).style.left=msie(“k”+(i+1)).style.left}
else
{msie(“k”+i).style.top=divTop;msie(“k”+i).style.left=divLeft}
}
}
for (i=0; i ‹ amount-1; i++)
{
for (n=0; n ‹ Clrs.length; n++)
{var x=Math.round(Math.random()*n)}
if (document.layers){ntscp['nsa'+i].bgColor=Clrs[x]}
else if (document.all||document.getElementById){msie(“k”+i).style.backgroundColor=Clrs[x]}
}
setTimeout(“Split()”,20);
}
function StArT(){bomb();Split()}
if(document.all&&!document.getElementById){document.getElementById=function(id){return document.all(id)}}
setTimeout(“StArT()”,1000);

‹/script›

接下来就是那些会飘下来的星星。首先请在lsaquo;head› ‹/head›里之间加入一下这一段coding。

‹SCRIPT language=JavaScript1.2›
‹!–
var no = 20; // STAR number
var speed = 20; // smaller number moves the STAR faster

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 1800;
function star(){
doc_width =document.body.clientWidth;
doc_height =document.body.clientHeight;
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
sayu=new Array();
j = 0;

for (i = 1; i ‹ (no+1); ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
sayu[i]=2.5*Math.random()-1;
document.all["dot"+i].style.display=”block”;

}
STAR_IE();
}
function STAR_IE() {
for (i = 1; i ‹( no+1); ++ i) { // iterate for every dot
yp[i] += sty[i];
xp[i]=xp[i]+sayu[i];
if (yp[i] › doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop =document.body.scrollTop+ yp[i];
document.all["dot"+i].style.pixelLeft =document.body.scrollLeft+xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout(“STAR_IE()”, speed);
}

// End –›
‹/SCRIPT›

接下来在‹body› 里加入这个onLoad=”star()”，那就会变成‹BODY onLoad=”star()”›。过后在过后在‹BODY onLoad=”star()”› ‹/body›之间加入以下这段code。

‹script type=”text/javascript”› blogspotInit();‹/script›‹div id=”space-for-ie”›‹/div›
‹div id=”dot1″ style=”POSITION: absolute;display:none; TOP: 15px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffff86 size=1›★‹/font›‹/div›

‹div id=”dot2″ style=”POSITION: absolute;display:none; TOP: 30px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffff86 size=1›★‹/font›‹/div›
‹div id=”dot3″ style=”POSITION: absolute;display:none; TOP: 45px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffffff size=1›★‹/font›‹/div›
‹div id=”dot4″ style=”POSITION: absolute;display:none; TOP: 60px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffff86 size=1›★‹/font›‹/div›
‹div id=”dot5″ style=”POSITION: absolute;display:none; TOP:150px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffff86 size=5›★‹/font›‹/div›
‹div id=”dot6″ style=”POSITION: absolute;display:none; TOP: 165px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffff86 size=5›★‹/font›‹/div›
‹div id=”dot7″ style=”POSITION: absolute;display:none; TOP: 180px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffff86 size=5›★‹/font›‹/div›
‹div id=”dot8″ style=”POSITION: absolute;display:none; TOP: 195px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffff86 size=5›★‹/font›‹/div›
‹div id=”dot9″ style=”POSITION: absolute;display:none; TOP: 210px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffffff size=5›★‹/font›‹/div›
‹div id=”dot10″ style=”POSITION: absolute;display:none; TOP: 225px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffff86 size=5›★‹/font›‹/div›

‹div id=”dot11″ style=”POSITION: absolute;display:none; TOP: 240px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffff86 size=5›★‹/font›‹/div›
‹div id=”dot12″ style=”POSITION: absolute;display:none; TOP: 255px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffffff size=5›★‹/font›‹/div›
‹div id=”dot13″ style=”POSITION: absolute;display:none; TOP: 270px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffff86 size=5›★‹/font›‹/div›
‹div id=”dot14″ style=”POSITION: absolute;display:none; TOP: 285px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffff86 size=5›★‹/font›‹/div›
‹div id=”dot15″ style=”POSITION: absolute;display:none; TOP: 300px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffff86 size=5›★‹/font›‹/div›
‹div id=”dot16″ style=”POSITION: absolute;display:none; TOP: 165px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffff86 size=3›★‹/font›‹/div›
‹div id=”dot17″ style=”POSITION: absolute;display:none; TOP: 180px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffff86 size=3›★‹/font›‹/div›
‹div id=”dot18″ style=”POSITION: absolute;display:none; TOP: 195px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffff86 size=3›★‹/font›‹/div›
‹div id=”dot19″ style=”POSITION: absolute;display:none; TOP: 210px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffffff size=3›★‹/font›‹/div›

‹div id=”dot20″ style=”POSITION: absolute;display:none; TOP: 225px; LEFT: 15px;filter:alpha(finishOpacity=0,style=2)”›‹font color=#ffffff size=3›★‹/font›‹/div›

★是可以更改的，你可以改成A来试试看，那你就会看到一大堆A飘下来。以上的coding有些部分是可以变更的，你可以慢慢研究。不过在这里要告诉你这个飘来飘去的星星在firefox是不管用的。
接下来就是那个心形图案乱乱飘舞的东西了。其实那只是个flash。只要你制作一个flash，然后在你的‹BODY› ‹/body›之间加入这么一小段：

‹embed style=”left: 150px; position: absolute; top: 20px;” xsrc=”在这里输入你得flash的URL” type=”application/x-shockwave-flash” wmode=”transparent” quality=”high” ;=”" align=”right” height=”600″ width=”800″›

这个flash的东西你可以改的，很容易得coding。
由于我并不会js，更不要说flash(只要有关画画的都别指望我），所以希望哪位高人可以指点指点。

Tags: javascript, js, 问题