類似易趣裏"我的易趣"中的那些小的下拉菜單.
用javascirpt 實現,
支持多瀏覽器,(在IE6和FireFox中調試成功)
以下是menu.js中的代碼
var aryMenu=new Array();
var vView;
var vHide;
var menudiv;
if(window.navigator.appName.indexOf("icrosoft")>=1){
vHide="hidden";
vView="visible";
}
else{
vHide="hide";
vView="show";
}
function addMenu(menuID){
aryMenu[menuID]=new Array();
}
function addLink(menuID,strLink,strText){
addMenuHtml(menuID,strLink,"<a href=/""+strLink+"/">"+strText+"</a>");
}
function addMenuHtml(menuID,strLink,strHtml){
aryMenu[menuID][strLink]=strHtml;
}
function menuView(menuID,thisevt){
if(document.all){
menudiv=document.all["menuLayer"];
}
else{
menudiv=document.getElementById("menuLayer");
}
var strHtml="<table width='100%' bgcolor='#FFCC99'>"
for(var strLink in aryMenu[menuID]){
strHtml=strHtml+"<tr><td>"+aryMenu[menuID][strLink]+"</td></tr>";
}
strHtml=strHtml+"</table>";
menudiv.innerHTML=strHtml;
divView(thisevt);
}
function check_mouse(thisevt){
var cx;
var cy;
var divobj;
if(document.all){
cx=document.body.scrollLeft+window.event.clientX;
cy=document.body.scrollTop+window.event.clientY;
}
else{
cx=thisevt.pageX;
cy=thisevt.pageY;
}
if(cx<menudiv.offsetLeft || cx>menudiv.offsetLeft+menudiv.offsetWidth || cy<menudiv.offsetTop || cy>menudiv.offsetTop+menudiv.offsetHeight){
if(menudiv.style){divobj=menudiv.style;vHide="hidden";}else{divobj=menudiv;vHide="hide";}
divobj.visibility="hidden";
document.οnmοusemοve=null;
}
}
function divView(thisevt){
var cx;
var cy;
var divobj;
if(document.all){
cx=document.body.scrollLeft+window.event.clientX-80;
cy=document.body.scrollTop+window.event.clientY-10;
}
else{
cx=thisevt.pageX-80;
cy=thisevt.pageY-10;
}
while(cx<document.body.scrollLeft){cx++;}
while(cy<document.body.scrollTop){cy++;}
while(cy>document.body.offsetHeight+document.body.scrollTop-menudiv.offsetHeight){cy--}
if(menudiv.style){divobj=menudiv.style;vView="visible";}else{divobj=menudiv;vView="show";}
divobj.left=cx;
divobj.top=cy;
divobj.visibility=vView;
document.οnmοusemοve=check_mouse;
}
addMenuBTN(menuID){
document.writeln("<img src=/"/menu.gif/" style=/"cursor:hand/" οnclick=/"menuView("+menuID+",event);/">");
}
document.writeln("<div id=/"menuLayer/" style=/"visibility:"+vHide+";BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 1;WIDTH:140px; LEFT: 53px; OVERFLOW: auto; BORDER-LEFT: #000000 1px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 70px; BACKGROUND-COLOR: #f5f5f5; layer-background-color: #F5F5F5/"></div>");
在需要使用的網頁的<body></body>之間加入<script language=javscript src=menu.js></script>
然後
<script>
addMenu(1098); //添加一個菜單.
addLink(1098,“http://www.baidu.com“,“百度“);//在1098菜單中添加一個鏈接
addLink(1098,“http://www.sohu.com“,“搜狐“);//在1098菜單中添加一個鏈接
addLink(1098,“http://www.sina.com.com“,“新浪“);//在1098菜單中添加一個鏈接
addLink(1098,“http://www.163.com“,“網易“);//在1098菜單中添加一個鏈接
addLink(1098,“http://www.csdn.net“,“CSDN“);//在1098菜單中添加一個鏈接
addMenuBTN(1098);//在當前位置顯示一個圖片按鈕,點擊這個安鈕時,顯示1098這個菜單
</script>
自由添加菜單,類似易趣的管理頁面中的那些小菜單.javascript實現,可跨多種瀏覽器
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
前端生成海報圖技術選型與問題解決
作者：vivo 互聯網大前端團隊 - Tian Yuhan 本篇文章主要聚焦海報圖分享這個形式，探討純前端在H5&小程序內，合成海報到下載到本地、分享至社交平臺整個流程中可能遇到的問題，以及如何解決。