顯示具有 Background 背景特效 標籤的文章。 顯示所有文章
顯示具有 Background 背景特效 標籤的文章。 顯示所有文章

2008年3月13日 星期四

背景位置

背景置中
複製以下程式碼至<head>與</head>之間
<style type=text/css>

<!--

body{

background-image:url(圖址);

background-position:center;

background-attachment:fixed;

background-repeat:no-repeat;}

-->

</style>


背景右上
複製以下程式碼至<head>與</head>之間
<style type=text/css>

<!--

body{

background-image:url(圖址);

background-position:right top;

background-attachment:fixed;

background-repeat:no-repeat;}

-->

</style>


背景右下
複製以下程式碼至<head>與</head>之間
<style type=text/css>

<!--

body{

background-image:url(圖址);

background-position:right bottom;

background-attachment:fixed;

background-repeat:no-repeat;}

-->

</style>


背景左上
複製以下程式碼至<head>與</head>之間
<style type=text/css>

<!--

body{

background-image:url(圖址);

background-position:left top;

background-attachment:fixed;

background-repeat:no-repeat;}

-->

</style>


背景左下
複製以下程式碼至<head>與</head>之間
<style type=text/css>

<!--

body{

background-image:url(圖址);

background-position:left bottom;

background-attachment:fixed;

background-repeat:no-repeat;}

-->

</style>


橫排置中
複製以下程式碼至<head>與</head>之間
<style type=text/css>

<!--

body{

background-image:url(圖址);

background-attachment:fixed;

background-repeat:repeat-x;

background-position:center;}

-->

</style>


橫排置上
複製以下程式碼至<head>與</head>之間
<style type=text/css>

<!--

body{

background-image:url(圖址);

background-attachment:fixed;

background-repeat:repeat-x;

background-position:top;}

-->

</style>


橫排置下
複製以下程式碼至<head>與</head>之間
<style type=text/css>

<!--

body{

background-image:url(圖址);

background-attachment:fixed;

background-repeat:repeat-x;

background-position:bottom;}

-->

</style>


橫排置左
複製以下程式碼至<head>與</head>之間
<style type=text/css>

<!--

body{

background-image:url(圖址);

background-attachment:fixed;

background-repeat:repeat-y;

background-position:left;}

-->

</style>


橫排置右
複製以下程式碼至<head>與</head>之間
<style type=text/css>

<!--

body{

background-image:url(圖址);

background-attachment:fixed;

background-repeat:repeat-y;

background-position:right;}

-->

</style>
張貼者： 於 沒有留言:
標籤：

雪景背景

步驟一、複製程式碼至<body></body>之間

<script language="JavaScript">

<!--

N = 30;

Y = new Array();

X = new Array();

S = new Array();

A = new Array();

B = new Array();

M = new Array();

V = (document.layers)?1:0;

iH=(document.layers)?window.innerHeight:window.document.body.clientHeight;

iW=(document.layers)?window.innerWidth:window.document.body.clientWidth;

for (i=0; i < N; i++){

Y[i]=Math.round(Math.random()*iH);

X[i]=Math.round(Math.random()*iW);

S[i]=Math.round(Math.random()*5+2);

A[i]=0;

B[i]=Math.random()*0.1+0.1;

M[i]=Math.round(Math.random()*1+1);

}

if (V){

for (i = 0; i < N; i++)

{document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0'
CLIP='0,0,"+M[i]+","+M[i]+"'></LAYER>")}

}

else{

document.write('<div style="position:absolute;top:0px;left:0px">');

document.write('<div style="position:relative">');

for (i = 0; i < N; i++)

{document.write('<div id="si" style="position:absolute;top:0;left:0;width:'+M[i]+';height:'+M[i]+';background:#fffff0;font-size:'+M[i]+'"></div>')}

document.write('</div></div>');

}

function snow(){

var H=(document.layers)?window.innerHeight:window.document.body.clientHeight;

var W=(document.layers)?window.innerWidth:window.document.body.clientWidth;

var T=(document.layers)?window.pageYOffset:document.body.scrollTop;

var L=(document.layers)?window.pageXOffset:document.body.scrollLeft;

for (i=0; i < N; i++){

sy=S[i]*Math.sin(90*Math.PI/180);

sx=S[i]*Math.cos(A[i]);

Y[i]+=sy;

X[i]+=sx;

if (Y[i] > H){

Y[i]=-10;

X[i]=Math.round(Math.random()*W);

M[i]=Math.round(Math.random()*1+1);

S[i]=Math.round(Math.random()*5+2);

}

if (V){document.layers['sn'+i].left=X[i];document.layers['sn'+i].top=Y[i]+T}

else{si[i].style.pixelLeft=X[i];si[i].style.pixelTop=Y[i]+T}

A[i]+=B[i];

}

setTimeout('snow()',50);

}

//-->

</script>



修改事項：
N = 30; //雪的數目
張貼者： 於 沒有留言:
標籤：

2008年3月12日 星期三

隨機背景

步驟一、複製以下程式碼至<head>&</head>之中

<script language=javascript>

<!--

var pic=new Array(5)

pic[0]="圖址1"

pic[1]="圖址2"

pic[2]="圖址3"

pic[3]="圖址4"

pic[4]="圖址5"

var newdate=new Date()

var getpic=newdate.getSeconds()%pic.length

document.write('<body background='+pic[getpic]+'>')

//-->

</script>

　

修改事項：

new Array(5)為你總圖片數

pic[0],pic[1],pic[2],pic[3],pic[4]可自行增加或減少。
張貼者： 於 沒有留言:
標籤：

星空動態背景

步驟一、複製程式碼到<body>之後

<script language="JavaScript">

<!-- Space Trip Script by kurt.grigg@virgin.net

cOlOuRs=new Array("abbbff","ffffee","ffff7a","dffffd","ffaaa0","ffddd0")

S_amount = 30;//number of small stars!!!!!

L_amount = 15;//number of larger stars!!!!

S_Ypos = new Array();

S_Xpos = new Array();

L_Ypos = new Array();

L_Xpos = new Array();

S_speed= new Array();

L_speed= new Array();

if (document.all)

{

for (i = 0; i < S_amount; i++)

{

S_Ypos[i] = Math.round(Math.random()*document.body.offsetHeight);

S_Xpos[i] = Math.round(Math.random()*document.body.offsetWidth);

}

for (i = 0; i < L_amount; i++)

{

L_Ypos[i] = Math.round(Math.random()*document.body.offsetHeight);

L_Xpos[i] = Math.round(Math.random()*document.body.offsetWidth);

}

document.write('<div id="Outer" style="position:absolute;top:0px;left:0px">');


document.write('<div id="Inner" style="position:relative">');

for (i = 0; i < S_amount; i++)

{document.write('<div id="ieS_star" style="position:absolute;top:'+S_Ypos[i]+';left:'+S_Xpos[i]+';width:1px;height:1px;background:#fffff0;font-size:1px"></div>');}


for (i = 0; i < L_amount; i++)

{document.write('<div id="ieL_star" style="position:absolute;top:'+L_Ypos[i]+';left:'+L_Xpos[i]+';width:2px;height:2px;background:#ffffff;font-size:2px"></div>');}


document.write('</div>');

document.write('</div>');

for (i = 0; i < L_amount; i++)

{

for (j = 0; j < cOlOuRs.length; j++)

{var NewColour=Math.round(Math.random()*[j])}

document.all.ieS_star[i].style.background=cOlOuRs[NewColour];

document.all.ieL_star[i].style.background=cOlOuRs[NewColour];

}

for (i=0; i < ieS_star.length; i++){S_speed[i]=Math.random()*3+1}

for (i=0; i < ieL_star.length; i++){L_speed[i]=Math.random()*7+2}

function ES_go()

{

document.all.Outer.style.pixelTop=document.body.scrollTop;

for (i=0; i < ieS_star.length; i++)

{

ieS_star[i].style.pixelLeft-=S_speed[i];

if (ieS_star[i].style.pixelLeft < -10){ieS_star[i].style.pixelLeft=window.document.body.offsetWidth}


}

S_timer=setTimeout('ES_go()',30);

}

function EL_go()

{

for (i=0; i < ieL_star.length; i++)

{

ieL_star[i].style.pixelLeft-=L_speed[i];

if (ieL_star[i].style.pixelLeft < -10){ieL_star[i].style.pixelLeft=window.document.body.offsetWidth}


}

L_timer=setTimeout('EL_go()',10);

}

function IeStart()

{

ES_go();

EL_go();

}

IeStart()

}//End Explorer



else if (document.layers)

{

for (i = 0; i < S_amount; i++)

{

S_Ypos[i] = Math.round(Math.random()*window.innerHeight);

S_Xpos[i] = Math.round(Math.random()*window.innerWidth);

document.write("<LAYER NAME='S_star"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0'
CLIP='0,0,1,1'></LAYER>");

document.layers["S_star"+i].top = S_Ypos[i];

document.layers["S_star"+i].left = S_Xpos[i];

}

for (i = 0; i < L_amount; i++)

{

L_Ypos[i] = Math.round(Math.random()*window.innerHeight);

L_Xpos[i] = Math.round(Math.random()*window.innerWidth);

document.write("<LAYER NAME='L_star"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0'
CLIP='0,0,2,2'></LAYER>");

document.layers["L_star"+i].top = L_Ypos[i];

document.layers["L_star"+i].left = L_Xpos[i];

for (j = 0; j < cOlOuRs.length; j++)

{

var NewColour=Math.round(Math.random()*[j]);

}

document.layers['S_star'+i].bgColor=cOlOuRs[NewColour];

document.layers['L_star'+i].bgColor=cOlOuRs[NewColour];

}

for (i=0; i < S_amount; i++){S_speed[i]=Math.random()*3+1}

for (i=0; i < L_amount; i++){L_speed[i]=Math.random()*7+2}

function NS_go()

{

for (i=0; i < S_amount; i++)

{

var temp="S_star"+i;//50

document.layers[temp].top=S_Ypos[i]+window.pageYOffset;

document.layers['S_star'+i].left-=S_speed[i];

if (document.layers['S_star'+i].left < -10){document.layers['S_star'+i].left=window.innerWidth}


}

S_timer=setTimeout('NS_go()',30);

}

function NL_go()

{

for (i=0; i < L_amount; i++)

{

var temp="L_star"+i

document.layers[temp].top=L_Ypos[i]+window.pageYOffset;

document.layers['L_star'+i].left-=L_speed[i];

if (document.layers['L_star'+i].left < -10){document.layers['L_star'+i].left=window.innerWidth}


}

L_timer=setTimeout('NL_go()',10);

}

function NsStart()

{

NS_go();

NL_go();

}

NsStart();

}//End Netscape

window.onresize = new Function("window.location.reload()");

//-->

</script>

　
張貼者： 於 沒有留言:
標籤：

漸暗效果

步驟一、複製程式碼到<head></head>之間

<SCRIPT Language="JavaScript">

<!--

count = 0;

col = "";



function startFade(fadeColor)

{

col = fadeColor;

setTimeout("fade()",200);

}



function fade()

{

if (count<16)

{

c=col.substring(count,count+1);

c+=c+c+c+c+c;

document.bgColor=c;

count++;

setTimeout("fade()",100);

}

}

startFade("fedcba9876543210");

// -->

</SCRIPT>

</script>

　

步驟二、複製程式碼到<body>框框之中

onUnload="startFade('0123456789abcdef')" bgcolor="#000000" text="#FFFFFF"
張貼者： 於 沒有留言:
標籤：

變換背景色彩

步驟一、複製程式碼至<body></body>之間

<A HREF="#" onMouseOver="bgColor='#B1CBE4'"><font
color="#B1CBE4">■</font></A>

<A HREF="#" onMouseOver="bgColor='#FF9900'"><font color="#FF9900">■</font></A>


<A HREF="#" onMouseOver="bgColor='#000000'"><font color="#000000">■</font></A>


<A HREF="#" onMouseOver="bgColor='#CC3300'"><font color="#CC3300">■</font></A>


<A HREF="#" onMouseOver="bgColor='#CC6699'"><font color="#CC6699">■</font></A>


<A HREF="#" onMouseOver="bgColor='#A9B88D'"><font
color="#A9B88D">■</font></A></p>


步驟二、複製程式碼到<body>框框之中

onUnload="startFade('0123456789abcdef')" bgcolor="#000000" text="#FFFFFF"


修改事項：
<A HREF="#" onMouseOver="bgColor='#B1CBE4'"><font
color="#B1CBE4">■</font></A>
張貼者： 於 沒有留言:
標籤：

黑白背景

步驟一、複製以下程式碼至<head>&</head>之中
<style type=text/css>

<!--

body{filter:gray;}

-->

</style>


修改事項：

body{filter:gray;} 將灰色(gray) 改為你喜歡的顏色
張貼者： 於 沒有留言:
標籤：

定時變色

步驟一、複製以下程式碼至<head>&</head>之中

<SCRIPT LANGUAGE="JavaScript">

<!--

setTimeout("document.bgColor='#000000'",1000*1);

setTimeout("document.bgColor='#333333'",1000*2);

setTimeout("document.bgColor='#cc6699'",1000*3);

setTimeout("document.bgColor='#8d8dc7'",1000*4);

setTimeout("document.bgColor='#ffecff'",1000*5);

//-->

</SCRIPT>


修改事項：
修改顏色碼
張貼者： 於 沒有留言:
標籤：

定時變色

步驟一、複製以下程式碼至<head>&</head>之中

<SCRIPT LANGUAGE="JavaScript">

<!--

setTimeout("document.bgColor='#000000'",1000*1);

setTimeout("document.bgColor='#333333'",1000*2);

setTimeout("document.bgColor='#cc6699'",1000*3);

setTimeout("document.bgColor='#8d8dc7'",1000*4);

setTimeout("document.bgColor='#ffecff'",1000*5);

//-->

</SCRIPT>


修改事項：
修改顏色碼
張貼者： 於 沒有留言:
標籤：
訂閱： 文章 (Atom)