<script>
function CoolMenuControl(){
// 常规变量 this lastScrollX= this lastScrollY= this lastScrollW= this lastScrollH= this td_X= this td_Y= this td_W= this td_H= this td= this mouseon= this current=null this _namethis table_namethis menudiv_namethis menutable_namethis ml= this menuarray=new Array()this speedthis href=""
// 菜单项目 function menuitem(type value url target){ this type=type this value=value this url=url this target=target }
// 插入菜单 this insertmenu=function(type value url target){ this menuarray[this menuarray length]=new menuitem(type value url target) }
// 程序初试化 this init=function(name bdc bgc speed Alpha){ var in="" var cellcount= var lastcellcount= this _name=name+"" this table_name=name+"table" this menudiv_name=name+"menudiv" this menutable_name=name+"menutable" this speed=speed
for (i= i<this menuarray lengthi++) { if (this menuarray[i] type==" ") cellcount=cellcount+ if (this menuarray[i] type==" " || this menuarray[i] type==" ") {cellcount= } if (lastcellcount<cellcount) {lastcellcount++} }
//alert(cellcount)
stylecode="cursor:handfilter:Alpha(style= opacity="+Alpha+")background color:"+bgc
suspendcode="<DIV id="+this _name+" style= POSITION:absoluteonclick= "+name+" doClick() >" +"<table id="+this table_name+" border= width= cellspacing= style= border collapse: collapse bordercolor= "+bdc+" >" +"<tr><td height= style= "+stylecode+" ></td></tr></table></div>"document write(suspendcode)var fcell=true for (i= i<this menuarray lengthi++) { switch(this menuarray[i] type) { case " ": t=cellcount* if (t<= ) { in+= <tr><td colspan= class=ht onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value } else { in+= <tr><td colspan= +t+ class=ht onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value } fcell=true break case " ": t=(cellcount )* if (t<= ) { in+= <tr><td width= ><td onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value } else { in+= <tr><td width= ><td colspan= +t+ onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value } fcell=true break case " ": if (fcell) { in+= <tr><td width= ><td onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value fcell=false } else { in+= <td width= ><td onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " >+this menuarray[i] value } break } } in= <div id= +this menudiv_name+ onmousemove=" +name+ doOver()"> + <table id= +this menutable_name+ border= cellpadding=" " class="menu" cellspacing=" "> +in + </table></div>//alert(in) document write(in)
this lastScrollX= this lastScrollY= this posXY(eval(this menutable_name) cells[ ]) this td_W=eval(this menutable_name) cells[ ] scrollWidth+ this td_H=eval(this menutable_name) cells[ ] scrollHeight setInterval(name+" scrollback()" ) }
// 单击超连接 this doClick=function(){ //alert(this url) var url=this href split(" ") //alert(url[ ]) //alert(url[ ]) if (url[ ]=="") return
if (url[ ]=="_blank") {window open(url[ ])} else {location href=url[ ]} }
// 滑动处理 this scrollback=function(){ diffX=this td_X diffY=this td_Y diffW=this td_W diffH=this td_H percentX=this speed*(diffX this lastScrollX)percentY=this speed*(diffY this lastScrollY)percentW=this speed*(diffW this lastScrollW)percentH=this speed*(diffH this lastScrollH)
if(percentX>)percentX=Math ceil(percentX)else percentX=Math floor(percentX)if(percentY>)percentY=Math ceil(percentY)else percentY=Math floor(percentY)if(percentW>)percentW=Math ceil(percentW)else percentW=Math floor(percentW)if(percentH>)percentH=Math ceil(percentH)else percentH=Math floor(percentH)
eval(this _name) style pixelTop+=percentYeval(this _name) style pixelLeft+=percentXeval(this table_name) style pixelWidth+=percentWeval(this table_name) style pixelHeight+=percentH
this lastScrollX=this lastScrollX+percentXthis lastScrollY=this lastScrollY+percentYthis lastScrollW=this lastScrollW+percentWthis lastScrollH=this lastScrollH+percentH}
// 滑出 this doOver=function() { if (event srcElement tagName=="TD") { if (event srcElement innerText length== || event srcElement innerText=="|") return this posXY(event srcElement) this td_W=event srcElement scrollWidth+ this td_H=event srcElement scrollHeight } }
// 绝对定位 this posXY=function(obj){ _left=obj offsetLeft _top=obj offsetTop vParent = obj offsetParent while (vParent tagName toUpperCase() != "BODY") { _left += vParent offsetLeft _top += vParent offsetTop vParent = vParent offsetParent } this td_X=_left this td_Y=_top }
// 关于 this about=function(){ alert("OK") }
} </script>
<head><meta equiv="Content Language" content="zh cn"><style>b{color=# cursor:hand} menu { font family:Arialcursor:Defaultfont size: pxborder: px # solidborder collapse: collapsefilter:progid:DXImageTransform Microsoft Gradient(gradienttype= startcolorstr=#ffffff endcolorstr=#dddddd) progid:DXImageTransform Microsoft Shadow(direction= color=#cccccc strength= )} ht{ font weight:bold } </style><! 第一步 实体化X Menu类 用法: var <实体变量>new CoolMenuControl() ><script language="javascript">var CoolMenu =new CoolMenuControl() var about=new Array() about[ ]="关于X Menu菜单nnAuthor:PuterJamnCopyright n转载请通知本人" about[ ]="关于作者nn"这家伙很懒 什么也没留下！！"
</script></head><body><! 第二步 建立菜单项目 用法: <实体变量>insertmenu(类型 Html代码 链接网址 目标) 类型 0代表菜单标题 1代表树型菜单子项目 2代表横向菜单子项目 Html代码 显示在菜单上的Html代码 链接网址 不用多说了 网址或Javascript脚本 目标 默认为空 既不在本页打开 "_blank"代表在新的页面打开 例如: CoolMenu insertmenu(" " "<img src=// blueidea /img/icon/arrow gif>新浪网" " "_blank") ><script>CoolMenu insertmenu(" " "本站首页" "" "") CoolMenu insertmenu(" " "新闻中心" " "_blank") CoolMenu insertmenu(" " "文章中心" " "_blank") CoolMenu insertmenu(" " "图片欣赏" " "_blank") CoolMenu insertmenu(" " "软件下载" " "_blank") CoolMenu insertmenu(" " "娱乐欣赏" " "_blank") </script>
lishixinzhi/Article/program/Java/JSP/201311/19958代码比较长，是你要的效果！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>Semiall.com</title>
<style type="text/css">
#index_yp {
width: 240px
height: 300px
float: left
border: 1px solid #71B3C6
}
.index_yp_card {
width: 225px
height: 33px
float: left
padding-left: 15px
}
.yp_card_0 {
width: 70px
height: 33px
float: left
background-image: url('idx_fl/images/hotShopCurrent.jpg')
text-align: center
color: #003366
font-weight: bold
line-height: 32px
cursor: pointer
}
.yp_card_1 {
width: 71px
height: 33px
float: left
background-image: url('idx_fl/images/b1tDot.jpg')
background-position: 0px 2px
background-repeat: no-repeat
text-align: center
color: #333333
line-height: 32px
cursor: pointer
}
.yp_card_2 {
float: left
height: 33px
background-image: url('idx_fl/images/b1tDot.jpg')
background-position: 0px 2px
background-repeat: no-repeat
}
.index_yp_main {
width: 240px
height: 270px
float: left
}
.yp_main_content {
width: 201px
height: 33px
float: left
border: 1px solid #BCDCE4
background-color: #F1F8FA
margin-bottom: 7px
padding: 3px 6px 3px 6px
overflow: hidden
}
.yp_main_content dt {
width: 201px
height: 13px
float: left
font-weight: normal
margin: 0px
font-size: 12px
padding-top: 2px
}
.yp_main_content dd {
width: 201px
line-height: 13px
float: left
font-weight: normal
margin: 0px
font-size: 12px
padding-top: 3px
text-align: right
}
.yp_main_content img {
padding: 0px 0px 2px 3px
}
.yp_main_list {
width: 215px
float: left
}
</style>
</head>
<body>
<div id="index_yp">
<!--yp1 start-->
<div id="yp_card1" style="display:block">
<div class="index_yp_card">
<div onmouseover="changeMc(1,1)" class="yp_card_0">推荐</div>
<div onmouseover="changeMc(1,2)" class="yp_card_1">生产</div>
<div onmouseover="changeMc(1,3)" class="yp_card_1">贸易</div>
<div class="yp_card_2"> </div>
</div>
<div onmouseover="changeMc(1,1)" class="index_yp_main">
<table class="hotxum" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="hotShop sort1 block yspace" id="DivShopPaiHang_Food">
<div class="txt" id="DivShopPaiHang_Flag1_Content" style="display: none">
</div>
<div class="txt" id="DivShopPaiHang_Flag2_Content" style="display: none">
</div>
<div class="txt" id="DivShopPaiHang_Flag3_Content" style="display: none">
</div>
<div class="txt" id="DivShopPaiHang_ShowPanel">
<div class="txt11">
11111111111111
</div>
</div>
</div>
<p>
<script type="text/javascript">
if(9>=1){
SwapPaiHangShopDiv('DivShopPaiHangFlag1','1')
}
</script>
</p>
</td>
</tr>
</table>
</div>
</div>
<!--end-->
<!--yp2 start-->
<div id="yp_card2" style="display:none">
<div class="index_yp_card">
<div onmouseover="changeMc(2,1)" class="yp_card_1">推荐</div>
<div onmouseover="changeMc(2,2)" class="yp_card_0" >生产</div>
<div onmouseover="changeMc(2,3)" class="yp_card_1">贸易</div>
<div class="yp_card_2"> </div>
</div>
<div onmouseover="changeMc(2,2)" class="index_yp_main">生产(sdf
dsfsd
)</div>
</div>
<!--end-->
<!--yp3 start-->
<div id="yp_card3" style="display:none">
<div class="index_yp_card">
<div onmouseover="changeMc(3,1)" class="yp_card_1">推荐</div>
<div onmouseover="changeMc(3,2)"class="yp_card_1">生产</div>
<div onmouseover="changeMc(3,3)" class="yp_card_0">贸易</div>
<div class="yp_card_2"> </div>
</div>
<div onmouseover="changeMc(3,3)" class="index_yp_main">贸易(循))</div>
</div>
<!--end-->
<!--end-->
</div>
<script language="javascript" type="text/javascript">
<!--
var s=3
var timer
function changeMc(x,y){
if (x!=y){
document.getElementById('yp_card'+x).style.display = "none"
document.getElementById('yp_card'+y).style.display = "block"
s=y
}
}
-->
</script>
</body>
</html>
这个也不复杂，不过感觉你的这个代码并不好的样子。//根据id获取对象
function
$(id)
{
return
document.getElementById(id)
}
function
showMenu(baseID,divID)
{
baseID=$(baseID)
divID=$(divID)
if(showMenu.timer)clearTimeout(showMenu.timer)//清楚定时器
hideCur()//隐藏上个菜单
divID.style.display='block'//显示当前菜单
showMenu.cur=divID//保存当前菜单对象
if(!divID.isCreate)
{//该菜单没创建标志则设置为已创建
divID.isCreate=true
//divID.timer
=
0
divID.onmouseover=function
()
{//鼠标放在菜单上时显示
if(showMenu.timer)clearTimeout(showMenu.timer)
hideCur()
divID.style.display='block'
}
function
hide()
{//鼠标离开菜单1秒后隐藏菜单
showMenu.timer=setTimeout(function
()
{
divID.style.display='none'
},1000)
}
divID.onmouseout=hide
baseID.onmouseout=hide
}
function
hideCur()
{//隐藏上个菜单
showMenu.cur&&(showMenu.cur.style.display='none')
}
}
