您現在的位置：所有版塊 >> 網頁背景
網頁背景
相關網站：
作者：  佚名 文章來源：  網頁天地 瀏覽次數：  399 收錄時間：  2004-03-11










◆文本向上循環滾動
說 明 文本自動向上循環滾動，鼠標放到上面還會暫時停下來。
代 碼 <table border="1" bordercolor="#000000" bgcolor="#6699ff" cellpadding="5" cellspacing="0">
<tr>
<td>
<script language=javascript>

document.write ("<marquee scrollamount='1' scrolldelay='30' direction= 'UP' width='200' id='helpor_net' height='150' onmouseover='helpor_net.stop()' onmouseout='helpor_net.start()' Author:redriver; For more,visit:www.helpor.net>")


document.write ("<h2><p align='center'><font color='#ffffff' face='黑體'>偶 然</font></h2>")
document.write ("<p align='right'><a href='#' target='_blank'><font color='#ffffff'>徐志摩</font></a> ")
document.write ("<p><font color='#ffffff'> ")
document.write ("<br>我是天空裡的一片雲，")
document.write ("<br>偶爾投影在你的波心—— ")
document.write ("<br>你不必訝異, ")
document.write ("<br>更無須歡喜—— ")
document.write ("<br>在轉瞬間消滅了蹤影。")
document.write ("<br>")
document.write ("<br>你我相逢在黑暗的海上，")
document.write ("<br>你有你的，我有我的，方向；")
document.write ("<br>你記得也好， ")
document.write ("<br>最好你忘掉， ")
document.write ("<br>在這交會時互放的光亮！ ")
document.write ("</font>")


document.write ("</marquee> ")
</script>
</td>
</tr>
</table>












 ◆打字機打彩色文字
說 明 文本自動向上循環滾動，鼠標放到上面還會暫時停下來。
代 碼

<DIV class=ttl1 id=ttl0><SPAN class=ttl1></SPAN></DIV>
<SCRIPT language="javascript">
<!--


var layers = document.layers, style = document.all, both = layers || style, idme=908601;
if (layers) { layerRef = 'document.layers'; styleRef = ''; } if (style) { layerRef = 'document.all'; styleRef = '.style'; }


function writeOnText(obj, str) {
if (layers) with (document[obj]) { document.open(); document.write(str); document.close(); }
if (style) eval(obj+'.innerHTML= str');
}
//以下是輸出的內容，自己修改即可。
var dispStr = new Array(
"<font color=red size=3>歡迎光臨「網頁特效集錦」...</font><br><font color=green size=3>你知道怎樣在你的網頁中做一個很酷的網頁選單嗎?</font><br><font color=red size=3>你知道怎樣讓你的網頁背景向上或向下移動嗎?</font><br><font color=blue size=3>你知道怎樣在你的首頁中任意位置顯示一個時鐘嗎?</font><br><font color=red size=3>你知道怎樣在首頁中做特效文字嗎?</font><br><font color=black size=3>你知道怎樣做一個很cool的日曆嗎?</font>"
);


var overMe=0;


function helpor_net(str, idx, idObj, spObj, clr1, clr2, delay, plysnd) {
var tmp0 = tmp1 = '', skip = 0;
if (both && idx <= str.length) {
if (str.charAt(idx) == '<') { while (str.charAt(idx) != '>') idx++; idx++; }
if (str.charAt(idx) == '&' && str.charAt(idx+1) != ' ') { while (str.charAt(idx) != ';') idx++; idx++; }
tmp0 = str.slice(0,idx);
tmp1 = str.charAt(idx++);


if (overMe==0 && plysnd==1) {
if (navigator.plugins[0]) {
if (navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled()) {
document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)",100); }
} else if (document.all) {
ding.Stop();
setTimeout("ding.Run()",100);
}
overMe=1;
} else overMe=0;


writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2+"'>"+tmp1+"</font></span>");
setTimeout("helpor_net('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+" ,"+plysnd+")",delay);
}
}


function www_helpor_net() {
helpor_net(dispStr[0], 0, 'ttl0', 'ttl1', '#339933', '#99FF33', 50, 0);
}
www_helpor_net();
// -->
</SCRIPT>












 ◆字元慢慢隱現
說 明 字元慢慢隱現
代 碼

<body bgcolor="#FFFFFF" id="www_helpor_net">
<div id="helpor_net" style="visibility:visible;width:400px;height:30px;text-align:center; font-family:隸書;font-size:30pt;color:6699ff"></div>


<SCRIPT language="javascript">
<!--
var thissize=20
var textfont="隸書"


var textcolor= new Array()
textcolor[0]="000000"
textcolor[1]="000000"
textcolor[2]="000000"
textcolor[3]="111111"
textcolor[4]="222222"
textcolor[5]="333333"
textcolor[6]="444444"
textcolor[7]="555555"
textcolor[8]="666666"
textcolor[9]="777777"
textcolor[10]="888888"
textcolor[11]="999999"
textcolor[12]="aaaaaa"
textcolor[13]="bbbbbb"
textcolor[14]="cccccc"
textcolor[15]="dddddd"
textcolor[16]="eeeeee"
textcolor[17]="ffffff"
textcolor[18]="ffffff"


var message = new Array()
message[0]="歡迎光臨網頁特效集錦"
message[1]="多停留一會兒"
message[2]="你會有更多的收穫"
message[3]="請再次光臨"
i_message=0


var i_strength=0
var i_message=0
var timer


function www_helpor_net() {
if(document.all) {
if (i_strength <=17) {
helpor_net.innerText=message[i_message]
document.all.helpor_net.style.filter="glow(color="+textcolor[i_strength]+", strength=4)"
i_strength++
timer=setTimeout("www_helpor_net()",100)
}
else {
clearTimeout(timer)
setTimeout("dewww_helpor_net()",1500)
}
}
}


function dewww_helpor_net() {
if(document.all) {
if (i_strength >=0) {
helpor_net.innerText=message[i_message]
document.all.helpor_net.style.filter="glow(color="+textcolor[i_strength]+", strength=4)"
i_strength--
timer=setTimeout("dewww_helpor_net()",100)
}
else {
clearTimeout(timer)
i_message++
if (i_message>=message.length) {i_message=0}
i_strength=0
intermezzo()
}
}
}


function intermezzo() {
helpor_net.innerText=""
setTimeout("www_helpor_net()",1000)
}
www_helpor_net();
//-->
</SCRIPT>












 ◆網頁自動滾屏效果
說 明 網頁自動滾屏效果
代 碼 <body onLoad="scrollit()">

<SCRIPT language="javascript">
<!--
function scrollit(){
for (I=1; I<=500; I++){
self.scroll(1,I)
}
}
//-->
</SCRIPT>












 ◆文字從天而降
說 明 文字從網頁頂部掉下來
代 碼 <p www_helpor_net="dropWord" style="position: relative !important; left: 10000 !important" align="center"><font size="3" color="#ee00FF">很 好 玩 吧 ! 有 沒 有 嚇 一 跳 ?</font><font size="7" face="Arial" color="#FF0000"><b>YES!</b></font></p>

<SCRIPT language="javascript">
<!--
dynamicanimAttr = "www_helpor_net"
animateElements = new Array()
currentElement = 0
speed = 0
stepsZoom = 8
stepsWord = 8
stepsFly = 12
stepsSpiral = 16
steps = stepsZoom
step = 0
outString = ""
function helpor_net()
{
var ms = navigator.appVersion.indexOf("MSIE")
ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
if(!ie4)
{
if((navigator.appName == "Netscape") &&
(parseInt(navigator.appVersion.substring(0, 1)) >= 4))
{
for (index=document.layers.length-1; index >= 0; index--)
{
layer=document.layers[index]
if (layer.left==10000)
layer.left=0
}
}
return
}
for (index=document.all.length-1; index >= document.body.sourceIndex; index--)
{
el = document.all[index]
animation = el.getAttribute(dynamicanimAttr, false)
if(null != animation)
{
if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
{
ih = el.innerHTML
outString = ""
i1 = 0
iend = ih.length
while(true)
{
i2 = startWord(ih, i1)
if(i2 == -1)
i2 = iend
outWord(ih, i1, i2, false, "")
if(i2 == iend)
break
i1 = i2
i2 = endWord(ih, i1)
if(i2 == -1)
i2 = iend
outWord(ih, i1, i2, true, animation)
if(i2 == iend)
break
i1 = i2
}
document.all[index].innerHTML = outString
document.all[index].style.posLeft = 0
document.all[index].setAttribute(dynamicanimAttr, null)
}
if(animation == "zoomIn" || animation == "zoomOut")
{
ih = el.innerHTML
outString = "<SPAN " + dynamicanimAttr + "=\"" + animation + "\" style=\"position: relative; left: 10000;\">"
outString += ih
outString += "</SPAN>"
document.all[index].innerHTML = outString
document.all[index].style.posLeft = 0
document.all[index].setAttribute(dynamicanimAttr, null)
}
}
}
i = 0
for (index=document.body.sourceIndex; index < document.all.length; index++)
{
el = document.all[index]
animation = el.getAttribute(dynamicanimAttr, false)
if (null != animation)
{
if(animation == "flyLeft")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = 0
}
else if(animation == "flyRight")
{
el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
el.style.posTop = 0
}
else if(animation == "flyTop" || animation == "dropWord")
{
el.style.posLeft = 0
el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
}
else if(animation == "flyBottom")
{
el.style.posLeft = 0
el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
}
else if(animation == "flyTopLeft")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
}
else if(animation == "flyTopRight" || animation == "flyTopRightWord")
{
el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
}
else if(animation == "flyBottomLeft")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
}
else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")
{
el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
}
else if(animation == "spiral")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
}
else if(animation == "zoomIn")
{
el.style.posLeft = 10000
el.style.posTop = 0
}
else if(animation == "zoomOut")
{
el.style.posLeft = 10000
el.style.posTop = 0
}
else
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = 0
}
el.initLeft = el.style.posLeft
el.initTop = el.style.posTop
animateElements[i++] = el
}
}
window.setTimeout("animate();", speed)
}
function offsetLeft(el)
{
x = el.offsetLeft
for (e = el.offsetParent; e; e = e.offsetParent)
x += e.offsetLeft;
return x
}
function offsetTop(el)
{
y = el.offsetTop
for (e = el.offsetParent; e; e = e.offsetParent)
y += e.offsetTop;
return y
}
function startWord(ih, i)
{
for(tag = false; i < ih.length; i++)
{
c = ih.charAt(i)
if(c == '<')
tag = true
if(!tag)
return i
if(c == '>')
tag = false
}
return -1
}
function endWord(ih, i)
{
nonSpace = false
space = false
while(i < ih.length)
{
c = ih.charAt(i)
if(c != ' ')
nonSpace = true
if(nonSpace && c == ' ')
space = true
if(c == '<')
return i
if(space && c != ' ')
return i
i++
}
return -1
}
function outWord(ih, i1, i2, dyn, anim)
{
if(dyn)
outString += "<SPAN " + dynamicanimAttr + "=\"" + anim + "\" style=\"position: relative; left: 10000;\">"
outString += ih.substring(i1, i2)
if(dyn)
outString += "</SPAN>"
}
function animate()
{
el = animateElements[currentElement]
animation = el.getAttribute(dynamicanimAttr, false)
step++
if(animation == "spiral")
{
steps = stepsSpiral
v = step/steps
rf = 1.0 - v
t = v * 2.0*Math.PI
rx = Math.max(Math.abs(el.initLeft), 200)
ry = Math.max(Math.abs(el.initTop), 200)
el.style.posLeft = Math.ceil(-rf*Math.cos(t)*rx)
el.style.posTop = Math.ceil(-rf*Math.sin(t)*ry)
}
else if(animation == "zoomIn")
{
steps = stepsZoom
el.style.fontSize = Math.ceil(50+50*step/steps) + "%"
el.style.posLeft = 0
}
else if(animation == "zoomOut")
{
steps = stepsZoom
el.style.fontSize = Math.ceil(100+200*(steps-step)/steps) + "%"
el.style.posLeft = 0
}
else
{
steps = stepsFly
if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
steps = stepsWord
dl = el.initLeft / steps
dt = el.initTop / steps
el.style.posLeft = el.style.posLeft - dl
el.style.posTop = el.style.posTop - dt
}
if (step >= steps)
{
el.style.posLeft = 0
el.style.posTop = 0
currentElement++
step = 0
}
if(currentElement < animateElements.length)
window.setTimeout("animate();", speed)
}
helpor_net()
//-->
</SCRIPT>












 ◆自選背景色（一）
說 明 鼠標放到各種顏色程式碼上，背景色就會相應改變
代 碼

<SCRIPT language=javascript>
<!--
function
makeArray(q)
{for(i=1;i<=q;i++){this[i]=0}}Colors=new makeArray(7);Colors[1]="00";Colors[2]="33";Colors[3]="66";Colors[4]="99";
Colors[5]="CC";Colors[6]="FF";
-->
</SCRIPT>
<SCRIPT language=javascript>
<!--
for(i=1;i<=6;i++){for(j=1;j<=6;j++){for(k=1;k<=6;k++){var thiscolor=Colors[i]+Colors[j]+Colors[k];document.writeln("<tr><td height = 20 align='center' width='200' bgcolor = \"#" + thiscolor + "\" align = right><a href =# ");document.writeln("\'\' onMouseOver = \"document.bgColor=\'"+thiscolor+"\'\">"+thiscolor+"</a></td></tr>");}}}


-->
</SCRIPT>












 ◆自選背景色（二）
說 明 鼠標放到各種顏色程式碼上，背景色就會相應改變
代 碼

<script language="javascript">
<!--
var hex = new Array(6)


hex[0] = "FF"
hex[1] = "CC"
hex[2] = "99"
hex[3] = "66"
hex[4] = "33"
hex[5] = "00"


function display(triplet) {
document.bgColor = '#' + triplet
alert('現在的背景色是 #'+triplet)
}


function drawCell(red, green, blue) {
document.write('<TD BGCOLOR="#' + red + green + blue + '">')
document.write('<A HREF="javascript:display(\'' + (red + green + blue) + '\')">')
document.write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12 WIDTH=12>')
document.write('</A>')
document.write('</TD>')
}


function drawRow(red, blue) {
document.write('<TR>')
for (var i = 0; i < 6; ++i) {
drawCell(red, hex[i], blue)
}
document.write('</TR>')
}


function drawTable(blue) {
document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>')


for (var i = 0; i < 6; ++i) {
drawRow(hex[i], blue)
}
document.write('</TABLE>')
}


function helpor_net(){
document.write('<TABLE CELLPADDING=5 CELLSPACING=0 BORDER=1><TR>')


for (var i = 0; i < 6; ++i) {
document.write('<TD BGCOLOR="#FFFFFF">')
drawTable(hex[i])
document.write('</TD>')
}
document.write('</TR></TABLE>')
}
helpor_net()
// -->
</script>












 ◆百頁窗效果
說 明 進入網頁時，網頁產生百頁窗似的的效果
代 碼

<style>
<!--
.helpor_net{position:absolute;
left:0;
top:0;
layer-background-color:#3399ff;
background-color:#3399ff;
border:0.1px solid green
}
-->
</style>


<div id="i1" class="helpor_net"></div><div id="i2" class="helpor_net"></div><div id="i3"
class="helpor_net"></div><div id="i4" class="helpor_net"></div><div id="i5" class="helpor_net"></div><div
id="i6" class="helpor_net"></div><div id="i7" class="helpor_net"></div><div id="i8" class="helpor_net"></div>


<SCRIPT language=javascript>
<!--
var speed=30
var temp=new Array()
var temp2=new Array()
if (document.layers){
for (i=1;i<=8;i++){
temp[i]=eval("document.i"+i+".clip")
temp2[i]=eval("document.i"+i)
temp[i].width=window.innerWidth/8-0.3
temp[i].height=window.innerHeight
temp2[i].left=(i-1)*temp[i].width
}
}
else if (document.all){
var clipbottom=document.body.offsetHeight,cliptop=0
for (i=1;i<=8;i++){
temp[i]=eval("document.all.i"+i+".style")
temp[i].width=document.body.clientWidth/8
temp[i].height=document.body.offsetHeight
temp[i].left=(i-1)*parseInt(temp[i].width)
}
}
function openit(){
window.scrollTo(0,0)
if (document.layers){
for (i=1;i<=8;i=i+2)
temp[i].bottom-=speed
for (i=2;i<=8;i=i+2)
temp[i].top+=speed
if (temp[2].top>window.innerHeight)
clearInterval(stopit)
}
else if (document.all){
clipbottom-=speed
for (i=1;i<=8;i=i+2){
temp[i].clip="rect(0 auto+"+clipbottom+" 0)"
}
cliptop+=speed
for (i=2;i<=8;i=i+2){
temp[i].clip="rect("+cliptop+" auto auto)"
}
if (clipbottom<=0)
clearInterval(stopit)
}
}
function www_helpor_net(){
stopit=setInterval("openit()",100)
}
www_helpor_net()


-->



</SCRIPT>












 ◆舞台光柱照射效果
說 明 網頁產生舞台光柱照射的效果
代 碼

<body bgcolor="#000000" id="www_helpor_net" style="position: relative; left: 0px; color: White; filter: light">


<script language="VBScript">
Option Explicit
sub window_OnLoad()
call www_helpor_net.filters.light(0).addambient(0,0,255,30)
call www_helpor_net.filters.light(0).addcone(400,400,200,100,100,200,204,200,80,10)
end sub


sub document_onMouseMove()
call www_helpor_net.filters.light(0).MoveLight(1,window.event.x,window.event.y,0,1)
end sub
</script>
 
 
 
 
© 開發者俱樂部 站長：Joseph 阿言