📄 ch21-299.html
字号:
<HTML>
<HEAD>
<TITLE>综合篇--QQ 型导航菜单</TITLE>
</HEAD>
<BODY bgcolor="#fef4d2" >
<br><br>
<center>
<h2>综合篇--QQ 型导航菜单</h2>
<hr width=300>
<br><br>
<!-- 案例代码开始 -->
<style type="text/css">a{text-decoration:none;color:#000000;font-size:8pt;font-family:verdana}</style>
<script language=JavaScript>
<!-- [Step1]: 这里可以更改导航菜单的初始位置 -->
var top=60,left=0;
<!-- [Step2]: 在此能够设置边界框、背景的颜色 -->
var bordercolor="#990033", bgcolorLight="#CC9999", bgcolorDark="#6666CC";
<!-- [Step3]: 这里可以按序增加菜单的名称和链接页面 -->
um1 = new Array("菜单1", "子菜单1－1", "http://", "子菜单1－2", "http://","子菜单1－3", "http://")
um2 = new Array("菜单2", "子菜单2－1", "http://", "子菜单2－2", "http://","子菜单2－3", "http://")
um3 = new Array("菜单3", "子菜单3－1", "http://", "子菜单3－2", "http://", "子菜单3－3", "http://")
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
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() {
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">');
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() {
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">')
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() {
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">')
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() {
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>')
}
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>
<!-- 案例代码结束 -->
</BODY>
</HTML>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -