JavaScript 经典代码(6)
<script language="JavaScript">
/*
All Files are Designed & Writen by Windy_sk, you can use it freely but ...
YOU MUST KEEP THIS ITEM !
Email: <a href="mailto:windy_sk@126.com">windy_sk@126.com</a>
*/
var ie = (document.getElementById && document.all);
var ns = (document.getElementById && !document.all);
var load_end = false;
function MenuItem(name) {
this.Menu_name = name;
this.Item_list = new Array();
this.add = function(title, link) {
this.Item_list.push([title,link]);
}
}
var Menu_list = new Array();
var n = 0;
Menu_list[n] = new MenuItem("test1");
Menu_list[n].add("111","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("444","#");
Menu_list[n].add("555","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
n++;
Menu_list[n] = new MenuItem("test2");
Menu_list[n].add("111","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
n++;
Menu_list[n] = new MenuItem("test3");
Menu_list[n].add("111","#");
Menu_list[n].add("222","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("333","#");
n++;
Menu_list[n] = new MenuItem("test4");
Menu_list[n].add("111","#");
Menu_list[n].add("222","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("333","#");
n++;
Menu_list[n] = new MenuItem("test5");
Menu_list[n].add("111","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
n++;
Menu_list[n] = new MenuItem("test6");
Menu_list[n].add("111","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
n++;
Menu_list[n] = new MenuItem("test7");
Menu_list[n].add("111","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("444","#");
Menu_list[n].add("555","#");
Menu_list[n].add("666","#");
Menu_list[n].add("777","#");
n++;
Menu_list[n] = new MenuItem("test8");
Menu_list[n].add("111","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("444","#");
Menu_list[n].add("555","#");
Menu_list[n].add("666","#");
Menu_list[n].add("777","#");
Menu_list[n].add("888","#");
Menu_list[n].add("999","#");
n++;
var css_menu = "padding:0px; color:#000000; position:absolute; borde:0px; overflow-y:visible; display:none; zIndex: 999; filter:alpha(opacity=100);";
var css_menu_tbl = "padding:0px; width:100%; background-color:#eeeeee; border: 1px #999999 dotted; border-collapse:collapse;";
var css_menu_itm = "padding:5px; cursor:pointer;";
var css_menu_list = "padding:0px; width:100%; border-collapse:collapse; background-color:black; BORDER: #999999 1px solid;";
menu = document.createElement("div");
menu.innerHTML = "";
menu.style.cssText = css_menu;
function Build_Menu_List() {
var content = "";
content += "<table border='1' cellPadding='2' style='"+css_menu_list+"'><tr bgColor='#ffcc00'>\n";
for(var i=0; i<Menu_list.length; i++) {
content += "<td style='cursor:pointer; padding: 2px' onMouseOver=\"showMenu(event,"+i+")\">"+Menu_list[i].Menu_name+"</td>\n";
}
content += "</tr></table>\n";
document.writeln(content);
}
var step = 5;
var step_alpha = Math.ceil(100/step);
var step_heigh = 0;
function showMenu(e, n) {
if(!load_end) return;
var obj = ie?e.srcElement:e.target;
if(obj.tagName.toLowerCase() != "td") return;
menu.innerHTML = "";
menu.style.display = "none";
menu.style.overflowY = "visible";
menu.style.height = "0px";
if(ie)menu.filters.alpha.opacity = 0;
if(ns)menu.style.MozOpacity = "0%"
var pos = new get_Pos(obj);
var content = "";
content += "<table border='1' style='"+css_menu_tbl+"'>";
for(i=0; i<Menu_list[n].Item_list.length; i++) {
content += "<tr><td style='"+css_menu_itm+"' onMouseOver=\"this.bgColor='#BEC5DE'\" onMouseOut=\"this.bgColor=''\"><a href='" + Menu_list[n].Item_list[i][1] + "'>" + Menu_list[n].Item_list[i][0] + "</a></td></tr>";
}
content += "</table>";
step = i;
menu.innerHTML = content;
with(menu.style){
left = pos["left"];
top = pos["top"] + parseInt(obj.offsetHeight);
width = obj.offsetWidth;
display = "";
step_alpha = Math.ceil(60 / step);
step_heigh = menu.offsetHeight / step;
borderBottom = "1px #999999 dotted";
height = "1px";
overflowY = "hidden";
}
fadeOut_menu();
return;
}
var timer = null;
function fadeOut_menu() {
clearTimeout(timer);
var cur_level = parseInt(ie?menu.filters.alpha.opacity:menu.style.MozOpacity);
cur_level += step_alpha;
if(cur_level>60) cur_level=60;
if(ie) menu.filters.alpha.opacity = cur_level;
if(ns) menu.style.MozOpacity = cur_level + "%";
menu.style.height = parseInt(menu.style.height) + step_heigh;
if(cur_level!=60){
timer=setTimeout("fadeOut_menu()",150);
} else {
menu.style.borderBottom = "";
}
}
function get_Pos(the_obj){
the_top = the_obj.offsetTop;
the_left = the_obj.offsetLeft;
while(the_obj=the_obj.offsetParent){
the_top += the_obj.offsetTop;
the_left += the_obj.offsetLeft;
}
this.top = the_top;
this.left = the_left;
}
window.onload = function() {
load_end = true;
document.body.appendChild(menu);
}
document.onclick = function() {
menu.style.display = "none";
}
Build_Menu_List();
</script>
<body bgcolor="#ffffee"></body>