📄 dao12.htm

📁 javascript各种效果的实例及源代码
💻 HTM
字号:
<html>

<head>

<title>滚动链接导航</title>

<style type="text/css">

<!--

body {  font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 4px; margin-right: 0px}

A { COLOR: black; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: none }

 A:hover { COLOR: red; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: underline }

a:active     { font: 9pt "宋体"; cursor: hand; color: #FF0033 }

--></style>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>

<body bgcolor="#fef4d9">



<br>

<center><font color=red face="隶书" size=6>滚动链接导航</font></center>

<br>

<center>

<table border=5 bordercolor=blue borderlight=green>

<tr><td align=center><font size=5 color=red face="Arial, Helvetica, sans-serif"><strong>下面为效果显示区</strong></font></td></tr><tr><td align=center FONT-SIZE: 11pt>

                   <script>

var scrollerwidth=95

var scrollerheight=131

var scrollerbgcolor='#ffccdd'

//3000 miliseconds=9 seconds

var pausebetweenimages=4000



var slideimages=new Array()

slideimages[0]='<a href="http://www.yahoo.com.cn" target="_blank">中文雅虎</a><br><br><a href="http://www.263.net" target="_blank">首都在线</a><br><br><a href="http://www.sina.com.cn" target="_blank">新浪网</a><br><br><a href="http://www.njcatv.net" target="_blank">南京有线宽带网</a>'

slideimages[1]='<a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a>'

slideimages[2]='<a href="http://www.yahoo.com.cn" target="_blank">中文雅虎</a><br><br><a href="http://www.263.net" target="_blank">首都在线</a><br><br><a href="http://www.netease.com" target="_blank">网易</a><br><br><a href="http://www.elong.com" target="_blank">e龙城市</a>'

slideimages[3]='<a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a>'

  



if (slideimages.length>1)

i=2

else

i=0



function move1(whichlayer){

tlayer=eval(whichlayer)

if (tlayer.top>0&&tlayer.top<=4){

tlayer.top=0

setTimeout("move1(tlayer)",pausebetweenimages)

setTimeout("move2(document.main.document.second)",pausebetweenimages)

return

}

if (tlayer.top>=tlayer.document.height*-1){

tlayer.top-=4

setTimeout("move1(tlayer)",100)

}

else{

tlayer.top=scrollerheight

tlayer.document.write(slideimages[i])

tlayer.document.close()

if (i==slideimages.length-1)

i=0

else

i++

}

}



function move2(whichlayer){

tlayer2=eval(whichlayer)

if (tlayer2.top>0&&tlayer2.top<=4){

tlayer2.top=0

setTimeout("move2(tlayer2)",pausebetweenimages)

setTimeout("move1(document.main.document.first)",pausebetweenimages)

return

}

if (tlayer2.top>=tlayer2.document.height*-1){

tlayer2.top-=4

setTimeout("move2(tlayer2)",100)

}

else{

tlayer2.top=scrollerheight

tlayer2.document.write(slideimages[i])

tlayer2.document.close()

if (i==slideimages.length-1)

i=0

else

i++

}

}



function move3(whichdiv){

tdiv=eval(whichdiv)

if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=4){

tdiv.style.pixelTop=0

setTimeout("move3(tdiv)",pausebetweenimages)

setTimeout("move4(second2)",pausebetweenimages)

return

}

if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){

tdiv.style.pixelTop-=4

setTimeout("move3(tdiv)",100)

}

else{

tdiv.style.pixelTop=scrollerheight

tdiv.innerHTML=slideimages[i]

if (i==slideimages.length-1)

i=0

else

i++

}

}



function move4(whichdiv){

tdiv2=eval(whichdiv)

if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=4){

tdiv2.style.pixelTop=0

setTimeout("move4(tdiv2)",pausebetweenimages)

setTimeout("move3(first2)",pausebetweenimages)

return

}

if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){

tdiv2.style.pixelTop-=4

setTimeout("move4(second2)",100)

}

else{

tdiv2.style.pixelTop=scrollerheight

tdiv2.innerHTML=slideimages[i]

if (i==slideimages.length-1)

i=0

else

i++

}

}



function startscroll(){

if (document.all){

move3(first2)

second2.style.top=scrollerheight

}

else if (document.layers){

move1(document.main.document.first)

document.main.document.second.top=scrollerheight+5

document.main.document.second.visibility='show'

}

}



window.onload=startscroll



if (document.layers)

document.write(slideimages[0])



if (document.layers)

document.write(slideimages[1])



if (document.layers)

document.write(slideimages[0])



if (document.all){

document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+'">')

document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')

document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')

document.write(slideimages[0])

document.writeln('</div>')

document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')

document.write(slideimages[1])

document.writeln('</div>')

document.writeln('</div>')

document.writeln('</span>')

}

</script>

</td></tr></table></center>

<br>

<br>

<center>

<textarea name=source rows=12 cols=55 class=yk9>

脚本说明:

把如下代码加入<body>区域中

  <script>

var scrollerwidth=115

var scrollerheight=131

var scrollerbgcolor='#FFFFFF'

//3000 miliseconds=9 seconds

var pausebetweenimages=4000



var slideimages=new Array()

slideimages[0]='<a href="http://www.yahoo.com.cn" target="_blank">中文雅虎</a><br><br><a href="http://www.263.net" target="_blank">首都在线</a><br><br><a href="http://fsnet.yes8.com/" target="_blank">网络特区</a><br><br><a href="http://go.163.com/~xiaofengyun/" target="_blank">风 云 居</a>'

slideimages[1]='<a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a>'

slideimages[2]='<a href="http://www.yahoo.com.cn" target="_blank">中文雅虎</a><br><br><a href="http://www.263.net" target="_blank">首都在线</a><br><br><a href="http://fsnet.yes8.com/" target="_blank">网络特区</a><br><br><a href="" target="_blank">你的链接</a>'

slideimages[3]='<a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a>'

  



if (slideimages.length>1)

i=2

else

i=0



function move1(whichlayer){

tlayer=eval(whichlayer)

if (tlayer.top>0&&tlayer.top<=4){

tlayer.top=0

setTimeout("move1(tlayer)",pausebetweenimages)

setTimeout("move2(document.main.document.second)",pausebetweenimages)

return

}

if (tlayer.top>=tlayer.document.height*-1){

tlayer.top-=4

setTimeout("move1(tlayer)",100)

}

else{

tlayer.top=scrollerheight

tlayer.document.write(slideimages[i])

tlayer.document.close()

if (i==slideimages.length-1)

i=0

else

i++

}

}



function move2(whichlayer){

tlayer2=eval(whichlayer)

if (tlayer2.top>0&&tlayer2.top<=4){

tlayer2.top=0

setTimeout("move2(tlayer2)",pausebetweenimages)

setTimeout("move1(document.main.document.first)",pausebetweenimages)

return

}

if (tlayer2.top>=tlayer2.document.height*-1){

tlayer2.top-=4

setTimeout("move2(tlayer2)",100)

}

else{

tlayer2.top=scrollerheight

tlayer2.document.write(slideimages[i])

tlayer2.document.close()

if (i==slideimages.length-1)

i=0

else

i++

}

}



function move3(whichdiv){

tdiv=eval(whichdiv)

if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=4){

tdiv.style.pixelTop=0

setTimeout("move3(tdiv)",pausebetweenimages)

setTimeout("move4(second2)",pausebetweenimages)

return

}

if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){

tdiv.style.pixelTop-=4

setTimeout("move3(tdiv)",100)

}

else{

tdiv.style.pixelTop=scrollerheight

tdiv.innerHTML=slideimages[i]

if (i==slideimages.length-1)

i=0

else

i++

}

}



function move4(whichdiv){

tdiv2=eval(whichdiv)

if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=4){

tdiv2.style.pixelTop=0

setTimeout("move4(tdiv2)",pausebetweenimages)

setTimeout("move3(first2)",pausebetweenimages)

return

}

if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){

tdiv2.style.pixelTop-=4

setTimeout("move4(second2)",100)

}

else{

tdiv2.style.pixelTop=scrollerheight

tdiv2.innerHTML=slideimages[i]

if (i==slideimages.length-1)

i=0

else

i++

}

}



function startscroll(){

if (document.all){

move3(first2)

second2.style.top=scrollerheight

}

else if (document.layers){

move1(document.main.document.first)

document.main.document.second.top=scrollerheight+5

document.main.document.second.visibility='show'

}

}



window.onload=startscroll



if (document.layers)

document.write(slideimages[0])



if (document.layers)

document.write(slideimages[1])



if (document.layers)

document.write(slideimages[0])



if (document.all){

document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+'">')

document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')

document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')

document.write(slideimages[0])

document.writeln('</div>')

document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')

document.write(slideimages[1])

document.writeln('</div>')

document.writeln('</div>')

document.writeln('</span>')

}

</script>

</textarea>

<SCRIPT LANGUAGE="JavaScript">



<!-- hide



function goHist(a) 



{



   history.go(a);



}



//-->



</script>



<FORM METHOD="post">

<INPUT TYPE="button" VALUE="返回" onClick="goHist(-1)" style="background-color: #8000FF; color: rgb(255,255,255)">

</form>

</center>

<br>

<br>

<br>

<br>

<br>

<br>

</body>

</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -