⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 ch11-154.txt

📁 javascript demo thanks please
💻 TXT
字号:
🔍 
<HTML>
<HEAD>
<TITLE>菜单导航篇--下拉式菜单</TITLE>
</HEAD>

<BODY bgcolor="#fef4d2" >

<br><br>
<center>
<font color="ffaafa"><h2>菜单导航篇--下拉式菜单</h2></font>
<hr width=300>
<br><br>

<!-- 案例代码1开始 -->

<script language=JavaScript>

ie=document.all?1:0
n=document.layers?1:0
var numberOfMenus=0
var bgColor='#CCCCCC'
var bgColorChangeTo='#99CC00'
var imageHeight=11

function newsMenuInit(){
	oTopMenu=new Array()
	for(i=0;i<=numberOfMenus;i++){
		oTopMenu[i]=new Array()
		oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)
		oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
		oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
		oTopMenu[i][1].moveIt(0,imageHeight)
		oTopMenu[i][0].clipTo(0,101,imageHeight+3,0)
		oTopMenu[i][0].moveIt(i*101+20+(i*10),10)
		oTopMenu[i][0].css.visibility="visible"
	}
}

function makeNewsMenu(obj,nest){
	nest=(!nest) ? '':'document.'+nest+'.'					
	this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')	
	this.scrollHeight=n?this.css.document.height:eval('document.all.'+obj+'.offsetHeight')
	this.moveIt=b_moveIt;this.bgChange=b_bgChange;
	this.slideUp=b_slideUp; this.slideDown=b_slideDown;
	this.clipTo=b_clipTo;
    this.obj = obj + "Object"; 	eval(this.obj + "=this")		
}

function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}

function b_bgChange(color){if(ie) this.css.backgroundColor=color; else this.css.bgColor=color}

function b_clipTo(t,r,b,l){
	if(n){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
	}else this.css.clip="rect("+t+","+r+","+b+","+l+")";
}

function b_slideUp(ystop,moveby,speed,fn,wh){
	if(!this.slideactive){
		if(this.y>ystop){
			this.moveIt(this.x,this.y-5); eval(wh)
			setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)}
		else{this.slideactive=false; this.moveIt(0,ystop); eval(fn)	}
	}
}

function b_slideDown(ystop,moveby,speed,fn,wh){
	if(!this.slideactive){
		if(this.y<ystop){
			this.moveIt(this.x,this.y+5); eval(wh)
			setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)}
		else{this.slideactive=false; this.moveIt(0,ystop); eval(fn)	}
	}
}

function topMenu(num){
	if(oTopMenu[num][1].y==imageHeight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,101,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,101,oTopMenu['+num+'][1].y+3,0)')
	else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(imageHeight,10,40,'oTopMenu['+num+'][0].clipTo(0,101,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,101,oTopMenu['+num+'][1].y+3,0)')
}

function menuOver(num){oTopMenu[num][1].bgChange(bgColorChangeTo)}

function menuOut(num){oTopMenu[num][1].bgChange(bgColor)}

onload=newsMenuInit;

</script>


<!-- 案例代码1结束 -->



<!-- 案例代码2开始 -->

<style>
  A{color:#333300; text-decoration:none}
  A:hover{color:#c0c000}
  A:link{text-decoration:none;}
  TD{font-family:arial,helvetica; font-size:12pt}
  DIV.clTopMenu{position:absolute; width:101; height:450; clip:rect(0,101,140,0); visibility:hidden; z-index:31; }
  DIV.clTopMenuBottom{position:absolute; width:101; height:60; clip:rect(0,101,300,0); top:41; layer-background-color:#ffffff; background-color:#ffffff; z-index:2}
  DIV.clTopMenuText{position:absolute; width:90; left:5; top:15; font-family:arial,helvetica; font-size:12px; z-index:1} 
</style>

<div id="divTopMenu0" class="clTopMenu"><a href="#" onmouseover="menuOver(0)" onmouseout="menuOut(0)" onclick="topMenu(0); if(ie)this.blur(); return false">
<!-- [Step1]: 这里可以设置图形的名称 -->
<!-- [Step2]: 在此能够修改图形的宽度和高度 -->
<img src="Picture002.jpg" width=101 height=11 alt="" border=1 align="top"></a>
	<div id="divTopMenuText0" class="clTopMenuText"><center>
<!-- [Step3]: 这里可以更改菜单名称对应的网址 -->
<!-- [Step4]: 在此能够设置菜单中的名称 -->
		<a href="http://www.263.net.cn/"  onclick="window.focus()">263 在线</a><br>
		<a href="http://www.sohu.com/"  onclick="window.focus()">搜 狐 网</a><br>
		<a href="http://cn.yahoo.com/"  onclick="window.focus()">雅 虎 网</a><br>
		<a href="http://www.sina.com.cn/"  onclick="window.focus()">新 浪 网</a><br>
		</center>
	</div>
	<div id="divTopMenuBottom0" class="clTopMenuBottom"></div>
</div>

<!-- 案例代码2结束 -->


</BODY>

</HTML>

⌨️ 快捷键说明

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