新思路网页特效集锦--特效代码

脚本特效展示

大家都玩过QQ吧，这个菜单的效果就是取材于那里呀！

以下代码加入<head>区域

以下代码加入<body>区域

<!--

a{text-decoration:none;color:#000000;font-size:8pt;font-family:verdana}

//-->

</style>
<script language="JavaScript">

<!--

var top=50;

var left=0;

var bordercolor="#000000";

var bgcolorLight="#EFEFEF";

var bgcolorDark="#DFDFDF";

um1 = new Array("Menu1",

"Link1_um1", "http:///",

"Link2_um1", "http:///",

"Link3_um1", "http:///",

"Link4_um1", "http:///",

"Link5_um1", "http:///",

"Link6_um1", "http:///")

um2 = new Array("Menu2",

"Link1_um2", "http:///",

"Link2_um2", "http:///",

"Link3_um2", "http:///",

"Link4_um2", "http:///")

um3 = new Array("Menu3",

"Link1_um3", "http:///",

"Link2_um3", "http:///",

"Link3_um3", "http:///",

"Link4_um3", "http:///",

"Link5_um3", "http:///",

"Link6_um3", "http:///",

"Link7_um3", "http:///",

"Link8_um3", "http:///",

"Link9_um3", "http:///",

"Link10_um3", "http:///",

"Link11_um3", "http:///",

"Link12_um3", "http:///",

"Link13_um3", "http:///",

"Link14_um3", "http:///",

"Link15_um3", "http:///")

//-->

</script>
<script language="JavaScript">

<!--

function checkBrowser(){

this.ver=navigator.appVersion

this.dom=document.getElementById?1:0

this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;

this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;

this.ie4=(document.all && !this.dom)?1:0;

this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;

this.ns4=(document.layers && !this.dom)?1:0;

this.mac=(this.ver.indexOf('Mac') > -1) ?1:0;

this.ope=(navigator.userAgent.indexOf('Opera')>-1);

this.ie=(this.ie6 || this.ie5 || this.ie4)

this.ns=(this.ns4 || this.ns5)

this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns5 || this.ns4 || this.mac || this.ope)

this.nbw=(!this.bw)

return this}

bw=new checkBrowser()

var um1length = ((um1.length-1)/2);

var um2length = ((um2.length-1)/2);

var um3length = ((um3.length-1)/2);

var um1nr = 0;

var um1nr2 = 1;

var um1nr3 = 2;

var um2nr = 0;

var um2nr2 = 1;

var um2nr3 = 2;

var um3nr = 0;

var um3nr2 = 1;

var um3nr3 = 2;

init();

function init()

{

if(bw.ie6 || bw.ie4 || bw.ie5){

height=document.body.offsetHeight-4;

document.write('<div id="menubg" style="position:absolute;top:0;left:'+left+';background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;height:'+height+';border-top-width:0px">')

document.write('</div>')

document.write('<div id="m" style="position:absolute;top:'+top+';left:'+left+'">')

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m1_ie()">'+um1[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<div id="um1" style="position:absolute;top:20;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">')

document.write('<table align="center">');

}

else if(bw.ns4){

height=innerHeight;

document.write('<layer id="menubg" position="absolute" top="0" left="'+left+'" bgcolor="'+bordercolor+'" width="127" height="'+(height)+'">')

document.write('</layer>')

document.write('<layer id="menubg2" position="absolute" top="0" left="'+(left+1)+'" bgcolor="'+bgcolorLight+'" width="125" height="'+(height-1)+'">')

document.write('</layer>')

document.write('<layer id="m" position="absolute" top="50" left="'+(left+1)+'">')

document.write('<layer bgcolor="'+bordercolor+'" width="125">')

document.write('<table align="center">')

document.write('<tr><td align="center"></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer bgcolor="'+bgcolorDark+'" width="125" position="absolute" top="1" left="0">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m1_n()">'+um1[0]+'</a></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer bgcolor="'+bordercolor+'" width="125" position="absolute" top="21" left="0">')

document.write('<table align="center">')

document.write('<tr><td align="center"></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer id="um1" position="absolute" top="22" left="0" bgcolor="'+bgcolorLight+'" width="125">')

document.write('<table align="center">')

}

else if(bw.ns5){

height=innerHeight-1;

document.write('</div>')

document.write('<div id="m" style="position:absolute;top:'+top+';left:'+left+'">')

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m1_n6()">'+um1[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<div id="um1" style="position:absolute;top:18;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">')

document.write('<table align="center">')

}

else{

height=document.body.offsetHeight-4;

document.write('</div>')

document.write('<div id="m" style="position:absolute;top:'+top+';left:'+left+'">')

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="#">'+um1[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<table align="center">')

}

init2();

}

function init2()

{

if(um1nr < um1length){

document.write('<tr><td align="center"><a href="'+um1[um1nr3]+'">'+um1[um1nr2]+'</a></td></tr>');

um1nr++;

um1nr2=um1nr2+2;

um1nr3=um1nr3+2;

init2();

}

else{

init3();

}

function init3()

{

if(bw.ie6 || bw.ie4 || bw.ie5){

document.write('</table>')

document.write('</div>')

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

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m2_ie()">'+um2[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<div id="um2" style="position:absolute;top:20;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">')

document.write('<table align="center">')

}

else if(bw.ns4){

document.write('</table>')

document.write('</layer>')

document.write('<layer id="m1" position="absolute" top="21" left="0">')

document.write('<layer bgcolor="'+bordercolor+'" width="125">')

document.write('<table align="center">')

document.write('<tr><td align="center"></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer bgcolor="'+bgcolorDark+'" width="125" position="absolute" top="1" left="0">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m2_n()">'+um2[0]+'</a></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer bgcolor="'+bordercolor+'" width="125" position="absolute" top="21" left="0">')

document.write('<table align="center">')

document.write('<tr><td align="center"></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer id="um2" position="absolute" top="22" left="0" bgcolor="'+bgcolorLight+'" width="125">')

document.write('<table align="center">')

}

else if(bw.ns5){

document.write('</table>')

document.write('</div>')

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

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m2_n6()">'+um2[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<div id="um2" style="position:absolute;top:18;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">')

document.write('<table align="center">')

}

else{

document.write('</table>')

document.write('</div>')

document.write('<div id="m1" style="position:absolute;top:'+((um1.length-1)/2*17.5+20)+';left:0">')

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="#">'+um2[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<table align="center">')

}

init4();

}

function init4()

{

if(um2nr < um2length){

document.write('<tr><td align="center"><a href="'+um2[um2nr3]+'">'+um2[um2nr2]+'</a></td></tr>');

um2nr++;

um2nr2=um2nr2+2;

um2nr3=um2nr3+2;

init4();

}

else{

init5();

}

function init5()

{

if(bw.ie6 || bw.ie4 || bw.ie5){

document.write('</table>')

document.write('</div>')

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

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m3_ie()">'+um3[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<div id="um3" style="position:absolute;top:20;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127;border-bottom-width:0px">')

document.write('<table align="center">')

}

else if(bw.ns4){

document.write('</table>')

document.write('</layer>')

document.write('<layer id="m2" position="absolute" top="21" left="0">')

document.write('<layer bgcolor="'+bordercolor+'" width="125">')

document.write('<table align="center">')

document.write('<tr><td align="center"></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer bgcolor="'+bgcolorDark+'" width="125" position="absolute" top="1" left="0">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m3_n()">'+um3[0]+'</a></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer bgcolor="'+bordercolor+'" width="125" position="absolute" top="21" left="0">')

document.write('<table align="center">')

document.write('<tr><td align="center"></td></tr>')

document.write('</table>')

document.write('</layer>')

document.write('<layer id="um3" position="absolute" top="22" left="0" bgcolor="'+bgcolorLight+'" width="125">')

document.write('<table align="center">')

}

else if(bw.ns5){

document.write('<tr><td align="center"><a href="'+um1[24]+'">'+um1[23]+'</a></td></tr>');

document.write('</table>')

document.write('</div>')

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

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="javascript:do_m2_n6()">'+um2[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<table align="center">')

}

else{

document.write('</table>')

document.write('</div>')

document.write('<div id="m2" style="position:absolute;top:'+((um2.length-1)/2*17.5+20)+';left:0">')

document.write('<div style="background-color:'+bgcolorDark+';border-style:solid;border-width:1px;border-color:'+bordercolor+';width:127">')

document.write('<table align="center">')

document.write('<tr><td align="center"><a href="#">'+um3[0]+'</a></td></tr>')

document.write('</table>')

document.write('</div>')

document.write('<table align="center">')

}

init6();

}

function init6()

{

if(um3nr < um3length){

document.write('<tr><td align="center"><a href="'+um3[um3nr3]+'">'+um3[um3nr2]+'</a></td></tr>');

um3nr++;

um3nr2=um3nr2+2;

um3nr3=um3nr3+2;

init6();

}

else{

init7();

}

function init7()

{

if(bw.ie6 || bw.ie5 || bw.ie4){

document.write('</table>')

document.write('</div>')

document.write('<div id="m3" style="height:'+((um3.length-1)/2*17.5+20+5)+';position:absolute;top:20;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';border-bottom-width:0px;width:127">')

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

}

else if(bw.ns4){

document.write('</table>')

document.write('</layer>')

document.write('<layer id="m3" position="absolute" top="21" left="0" width="125" height="'+((um3.length-1)/2*20+20)+'" bgcolor="'+bgcolorLight+'">')

document.write('<layer bgcolor="'+bordercolor+'" width="125" height="1">')

document.write('</table></layer></table></layer></layer></layer></layer></layer>')

}

else if(bw.ns5){

document.write('</table>')

document.write('</div>')

document.write('<div id="m3" style="height:'+((um3.length-1)/2*17.5+20+5)+';position:absolute;top:18;left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';border-bottom-width:0px;width:127">')

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

}

else{

document.write('</table>')

document.write('</div>')

document.write('<div id="m3" style="height:2;position:absolute;top:'+((um3.length-1)/2*17.5+20+5)+';left:0;background-color:'+bgcolorLight+';border-style:solid;border-width:1px;border-color:'+bordercolor+';border-bottom-width:0px;width:127">')

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

}

var m1pos_ie=20, m1jump_ie=-5;

var m2pos_ie=20, m2jump_ie=-5;

var m3pos_ie=20, m3jump_ie=-5;

var m1pos_n6=18, m1jump_n6=-6;

var m2pos_n6=18, m2jump_n6=-6;

var m3pos_n6=18, m3jump_n6=-6;

var m1pos_n=21, m1jump_n=-5;

var m2pos_n=21, m2jump_n=-5;

var m3pos_n=21, m3jump_n=-5;

var time=5;

function do_m1_ie()

{

if(m2pos_ie>0)

{

m2jump_ie=-5;

if(m2pos_ie>=(um2.length-1)/2*17.5+20)

m2_move_ie();

}

if(m3pos_ie>0)

{

m3jump_ie=-5;

if(m3pos_ie>=(um3.length-1)/2*17.5+20)

m3_move_ie();

}

m1jump_ie=-m1jump_ie;

if(m1pos_ie<=20 || m1pos_ie>=(um1.length-1)/2*17.5+20)

m1_move_ie();

}

function m1_move_ie(witch)

{

document.all.m1.style.top=m1pos_ie;

m1pos_ie+=m1jump_ie;

if(m1pos_ie>15 && m1pos_ie<(um1.length-1)/2*17.5+20+5)

setTimeout("m1_move_ie()", time);

}

function do_m2_ie()

{

if(m1pos_ie>0)

{

m1jump_ie=-5;

if(m1pos_ie>=(um1.length-1)/2*17.5+20)

m1_move_ie();

}

if(m3pos_ie>0)

{

m3jump_ie=-5;

if(m3pos_ie>=(um3.length-1)/2*17.5+20)

m3_move_ie();

}

m2jump_ie=-m2jump_ie;

if(m2pos_ie<=20 || m2pos_ie>=(um2.length-1)/2*17.5+20)

m2_move_ie();

}

function m2_move_ie()

{

document.all.m2.style.top=m2pos_ie;

m2pos_ie+=m2jump_ie;

if(m2pos_ie>15 && m2pos_ie<(um2.length-1)/2*17.5+20+5)

setTimeout("m2_move_ie()", time);

}

function do_m3_ie()

{

if(m2pos_ie>0)

{

m2jump_ie=-5;

if(m2pos_ie>=(um2.length-1)/2*17.5+20)

m2_move_ie();

}

if(m1pos_ie>0)

{

m1jump_ie=-5;

if(m1pos_ie>=(um1.length-1)/2*17.5+20)

m1_move_ie();

}

m3jump_ie=-m3jump_ie;

if(m3pos_ie<=20 || m3pos_ie>=(um3.length-1)/2*17.5+20)

m3_move_ie();

}

function m3_move_ie()

{

document.all.m3.style.top=m3pos_ie;

m3pos_ie+=m3jump_ie;

if(m3pos_ie>15 && m3pos_ie<(um3.length-1)/2*17.5+20+5)

setTimeout("m3_move_ie()", time);

}

function do_m1_n()

{

if(m2pos_n>0)

{

m2jump_n=-5;

if(m2pos_n>=(um2.length-1)/2*20+20)

m2_move_n();

}

if(m3pos_n>0)

{

m3jump_n=-5;

if(m3pos_n>=(um3.length-1)/2*20+20)

m3_move_n();

}

m1jump_n=-m1jump_n;

if(m1pos_n<=21 || m1pos_n>=(um1.length-1)/2*20+20)

m1_move_n();

}

function m1_move_n()

{

document.m.document.m1.top=m1pos_n;

m1pos_n+=m1jump_n;

if(m1pos_n>=20 && m1pos_n<(um1.length-1)/2*20+20)

setTimeout("m1_move_n()", time);

}

function do_m2_n()

{

if(m1pos_n>0)

{

m1jump_n=-5;

if(m1pos_n>=(um1.length-1)/2*20+20)

m1_move_n();

}

if(m3pos_n>0)

{

m3jump_n=-5;

if(m3pos_n>=(um3.length-1)/2*20+20)

m3_move_n();

}

m2jump_n=-m2jump_n;

if(m2pos_n<=21 || m2pos_n>=(um2.length-1)/2*20+20)

m2_move_n();

}

function m2_move_n()

{

document.m.document.m1.document.m2.top=m2pos_n;

m2pos_n+=m2jump_n;

if(m2pos_n>20 && m2pos_n<(um2.length-1)/2*20+20)

setTimeout("m2_move_n()", time);

}

function do_m3_n()

{

if(m2pos_n>0)

{

m2jump_n=-5;

if(m2pos_n>=(um2.length-1)/2*20+20)

m2_move_n();

}

if(m1pos_n>0)

{

m1jump_n=-5;

if(m1pos_n>=(um1.length-1)/2*20+20)

m1_move_n();

}

m3jump_n=-m3jump_n;

if(m3pos_n<=21 || m3pos_n>=(um3.length-1)/2*20+20)

m3_move_n();

}

function m3_move_n()

{

document.m.document.m1.document.m2.document.m3.top=m3pos_n;

m3pos_n+=m3jump_n;

if(m3pos_n>20 && m3pos_n<(um3.length-1)/2*20+20)

setTimeout("m3_move_n()", time);

}

function do_m1_n6()

{

if(m2pos_n6>0)

{

m2jump_n6=-6;

if(m2pos_n6>=(um2.length-1)/2*17.5+20)

m2_move_n6();

}

if(m3pos_n6>0)

{

m3jump_n6=-6;

if(m3pos_n6>=(um3.length-1)/2*17.5+20)

m3_move_n6();

}

m1jump_n6=-m1jump_n6;

if(m1pos_n6<=18 || m1pos_n6>=(um1.length-1)/2*17.5+20)

m1_move_n6();

}

function m1_move_n6()

{

document.getElementById('m1').style.top=m1pos_n6;

m1pos_n6+=m1jump_n6;

if(m1pos_n6>15 && m1pos_n6<(um1.length-1)/2*17.5+20+5)

setTimeout("m1_move_n6()", time);

}

function do_m2_n6()

{

if(m1pos_n6>0)

{

m1jump_n6=-6;

if(m1pos_n6>=(um1.length-1)/2*17.5+20)

m1_move_n6();

}

if(m3pos_n6>0)

{

m3jump_n6=-6;

if(m3pos_n6>=(um3.length-1)/2*17.5+20)

m3_move_n6();

}

m2jump_n6=-m2jump_n6;

if(m2pos_n6<=18 || m2pos_n6>=(um2.length-1)/2*17.5+20)

m2_move_n6();

}

function m2_move_n6()

{

document.getElementById('m2').style.top=m2pos_n6;

m2pos_n6+=m2jump_n6;

if(m2pos_n6>15 && m2pos_n6<(um2.length-1)/2*17.5+20+5)

setTimeout("m2_move_n6()", time);

}

function do_m3_n6()

{

if(m2pos_n6>0)

{

m2jump_n6=-6;

if(m2pos_n6>=(um2.length-1)/2*17.5+20)

m2_move_n6();

}

if(m1pos_n6>0)

{

m1jump_n6=-6;

if(m1pos_n6>=(um1.length-1)/2*17.5+20)

m1_move_n6();

}

m3jump_n6=-m3jump_n6;

if(m3pos_n6<=18 || m3pos_n6>=(um3.length-1)/2*17.5+20)

m3_move_n6();

}

function m3_move_n6()

{

document.getElementById('m3').style.top=m3pos_n6;

m3pos_n6+=m3jump_n6;

if(m3pos_n6>15 && m3pos_n6<(um3.length-1)/2*17.5+20+5)

setTimeout("m3_move_n6()", time);

}

//-->

</script>