弹出菜单层二
在网找资料的时候发现了很有用的js代码。它实现了弹出菜单的功能。
一、下面是js代码：
// JScript 文件
Code1
// JScript 文件2
var menuTimer =null;3
function showmenu(obj1,obj2,state,location)
{ 4
var btn=document.getElementById(obj1);5
var obj=document.getElementById(obj2);6
var h=btn.offsetHeight;7
var w=btn.offsetWidth;8
var x=btn.offsetLeft;9
var y=btn.offsetTop;10
11
obj.onmouseover =function(){12
showmenu(obj1,obj2,'show',location);13
}14
obj.onmouseout =function(){15
showmenu(obj1,obj2,'hide',location);16
}17
18
while(btn=btn.offsetParent){y+=btn.offsetTop;x+=btn.offsetLeft;}19
20
var hh=obj.offsetHeight;21
var ww=obj.offsetWidth;22
var xx=obj.offsetLeft;//style.left;23
var yy=obj.offsetTop;//style.top;24
var obj2state=state.toLowerCase();25
var obj2location=location.toLowerCase();26
27
var showx,showy;28
29
if(obj2location=="left" || obj2location=="l" || obj2location=="top" || obj2location=="t" || obj2location=="u" || obj2location=="b" || obj2location=="r" || obj2location=="up" || obj2location=="right" || obj2location=="bottom"){30
if(obj2location=="left" || obj2location=="l"){showx=x-ww;showy=y;}31
if(obj2location=="top" || obj2location=="t" || obj2location=="u"){showx=x;showy=y-hh;}32
if(obj2location=="right" || obj2location=="r"){showx=x+w;showy=y;}33
if(obj2location=="bottom" || obj2location=="b"){showx=x;showy=y+h;}34
}else{ 35
showx=xx;showy=yy;36
}37
obj.style.left=showx+"px";38
obj.style.top=showy+"px";39
if(state =="hide"){40
menuTimer =setTimeout("hiddenmenu('"+ obj2 +"')", 500);41
}else{42
clearTimeout(menuTimer);43
obj.style.visibility ="visible";44
}45
}46
function hiddenmenu(psObjId){47
document.getElementById(psObjId).style.visibility ="hidden";48
} 49
50
二、应用
示例前台代码1
<head runat="server">2
<title>无标题页</title>3
4
<script language="javascript" type="text/javascript" src="jscript.js"></script>5
6
<style>7
#mdiv{}{ 8
position: absolute; 9
border: 1px solid #92B7E5; 10
top: 0px; 11
left: 0px; 12
width: 150px; 13
height: 170px; 14
background-color: #FFFFFF; 15
visibility: hidden; 16
padding: 5px; 17
overflow: hidden;18
}19
</style>20
</head>21
<body>22
<p>23
调用：</p>24
<p>25
showmenu(thisobjid,menuobjid,state,position)26
</p>27
<p>28
thisobjid =控件本身id</p>29
<p>30
menuobjid =弹出菜单层的id</p>31
<p>32
state 有两个值可选，show即显示菜单 hidden即隐藏菜单</p>33
<p>34
position 有四个值可选，top菜单显示于顶部 bottom菜单显示于底部 left菜单显示于左侧 right菜单显示于右侧</p>35
<p>36
</p>37
<p>38
<a href="" id="m1" onmouseover="showmenu('m1','mdiv','show','right')" onmouseout="showmenu('m1','mdiv','hide','right')"39
style="cursor: pointer;">鼠标移到这里来看看</a>40
<div id="mdiv" runat="server">41
菜单内容。。。42
</div>43
</body>可以从后台代码控制菜单的内容和样式：
示例后台代码1
protected void Page_Load(object sender, EventArgs e)2
{3
mdiv.InnerHtml = "<b>菜单内容</b>";4
mdiv.Style.Add("width", "50px");5
mdiv.Attributes.Add("style", "background-color:red;");6
}小结：时间太紧，先应用，回头在研究搞明白。
人的一生应该这样度过：当他回首往事的时候，不会因为虚度年华而悔恨，也不会因为碌碌无为而羞愧。
浙公网安备 33010602011771号