使用 Javascript 并结合 XML 制作滑动透明的菜单，且该菜单拥有跟随鼠标的注释 (转载)
2006-05-27 22:40
896 查看
本文主要介绍如何使用 javascript 加载用 XML 储存的菜单信息。此菜单以滑动的形式在页面上呈现，且该菜单的项目注释跟随鼠标移动。给你的网页带来无限的动感……欲见效果请访问我的主页—— http://172.meibu.com
一、在<body>之前引入脚本“GlideMenu.js”
<SCRIPT language="javascript" src="jscript/GlideMenu.js" charset="gb2312"></SCRIPT>
二、在<body>之前，加载需要直接在页面上运行的初始化脚本
<script language="javascript">
if (mtDropDown.isSupported())
{
ms = new mtDropDownSet(mtDropDown.direction.down, 0, 0, mtDropDown.reference.bottomLeft);
}
</script>
注：mtDropDown.direction.down 代表菜单从上往下滑动；”down” 换成 “right” 表示从左往右滑动出现（菜单项目较多时，比较适用）
mtDropDown.reference.bottomLeft 中的 ”bottomLeft” 也可换成以下几种情况（在此不一一解释了，各位自行体会）：
“topLeft”、”topRight”、”bottomRight”
三、在<body>中必须拥有以下两个需要用到的 Div
<DIV id="GlideMenuDiv" style="VISIBILITY: hidden;"></DIV>
<DIV id="overDiv" style="Z-INDEX: 1001;VISIBILITY: hidden;POSITION: absolute"></DIV>
四、在<body>结束之前，依次引入以下语句，注意顺序不能乱
<xml src="GlideMenu.xml" id="MenuXML"></xml>
<script language="javascript" src="jscript/MenuDesc.js" charset="gb2312"></script>
<script language="javascript" src="jscript/AddMenu.js" charset="gb2312"></script>
五、关联 body 的 onload 事件（“jscript/AddMenu.js”中的“WebInit()”）
<body onload="WebInit()">
六、给需要加载滑动菜单的节点赋于 ID ，并选择样式
例如：<span id="AccessMenu" class="siteType"> Access 站点</span>
七、编辑 XML 文档 “GlideMenu.xml”
例如：为 id="AccessMenu" 添加以下菜单节点
<?xml version="1.0" encoding="utf-8" ?>
<GlideMenu>
<MenuNode id="AccessMenu">
<MenuItem MenuName="IT 内部网" URL="../SoftWeb/Login.aspx">
IT 部内部管理系统主要功能<UL><li>成员注册、审批<li>申请加班、填写请假条、及请假期间的工作代理<li>领用物品申请，物品及库存管理<li>专案进度管理、会议室预约<li>公告、软件管理、电子相册</li><li>用户、群组权限的设定</li></UL>
</MenuItem>
<MenuItem MenuName="<未知系统>" URL="">
尚未布署 ^_^
</MenuItem>
<MenuItem MenuName="<未知系统>" URL="" width="100">
尚未布署 ^_^
</MenuItem>
</MenuNode>
</GlideMenu>
GlideMenu.xml 的格式要求：
1. <MenuNode id="AccessMenu"> 节点要有 id 属性，对应 <span id="AccessMenu">
2. <MenuItem MenuName="IT 内部网" URL="../SoftWeb/Login.aspx"> “ MenuName”指呈现在页面的菜单名称；“URL”是你需要跳转的页面网址；“width”是指定菜单注释的宽度，注意不是菜单的宽度
3. <MenuItem> 节点中的文本就是跟随鼠标的注释，注意此文本不能出现换行
4. 菜单名称与注释支持 HTML 显示，但必须将 "<" 换成 " < " 、将 ">" 换成 " > "。如：将
<UL> <li> 成员注册、审批 </li></UL>
转换成
<UL><li>成员注册、审批</li></UL>
八、加上样式，使得菜单变得透明
.siteType{cursor:hand;color : #6600cc}
.menuDesc{ FILTER: alpha(opacity=85);}
.mtDropdownMenu { LEFT: -1imagespx; OVERFLOW: hidden; POSITION: absolute; TOP: -1imagespx }
.mtDropdownMenu .content { POSITION: absolute }
.mtDropdownMenu .items { BORDER-BOTTOM: #999 1px solid; BORDER-LEFT: #999 1px solid; BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; LEFT: 0px; POSITION: relative; TOP: 0px; Z-INDEX: 2 }
.mtDropdownMenu .item { BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-RIGHT: medium none; BORDER-TOP: medium none; COLOR: #0000cc; CURSOR: hand; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"; FONT-SIZE: 12px; TEXT-DECORATION: none; EXT-DECORATION: none }
.mtDropdownMenu .background { FILTER: alpha(opacity=70); LEFT: 0px; POSITION: absolute; TOP: 0px; Z-INDEX: 1; moz-opacity: .8 }
.mtDropdownMenu .shadowRight { FILTER: alpha(opacity=40); POSITION: absolute; TOP: 3px; WIDTH: 2px; Z-INDEX: 3; moz-opacity: .4 }
.mtDropdownMenu .shadowBottom { FILTER: alpha(opacity=40); HEIGHT: 2px; LEFT: 3px; POSITION: absolute; Z-INDEX: 1; moz-opacity: .4 }
.mtDropdownMenu .hover { BACKGROUND: #cccccc; COLOR: #ffffff }
.mtDropdownMenu .item IMG { MARGIN-LEFT: 10px }
九、附上脚本文件“AddMenu.js”“MenuDesc.js”“GlideMenu.js”
1. <script language="javascript" src="jscript/AddMenu.js" charset="gb2312"></script>
function WebInit()
{
if (mtDropDown.isSupported())
{
/*
var x_doc = new ActiveXObject("Msxml2.DomDocument");
x_doc.async = false;
x_doc.setProperty("ServerHTTPRequest", true);
x_doc.load("GlideMenu.xml");
*/
var x_doc =document.getElementById("MenuXML").XMLDocument;
var x_nodes = x_doc.selectNodes("GlideMenu//MenuNode");
for(var i=0;i< x_nodes.length;i++)
{
var menuID = x_nodes[i].attributes.getNamedItem("id").value;
var menu = document.getElementById(menuID);
if(menu == null){continue;}
var menuObj = ms.addMenu(menu);
var x_items = x_nodes[i].selectNodes("MenuItem");
for( var j=0;j<x_items.length;j++)
{
if(x_items[j].attributes.getNamedItem("width") == null)
{
menuObj.addItem(x_items[j].attributes.getNamedItem("MenuName").value,x_items[j].attributes.getNamedItem("URL").value,x_items[j].text);
}
else
{
menuObj.addItem(x_items[j].attributes.getNamedItem("MenuName").value,x_items[j].attributes.getNamedItem("URL").value,x_items[j].text,x_items[j].attributes.getNamedItem("width").value);
}
menuObj.onactivate = function() {this.src='images/1-1.gif'};
menuObj.ondeactivate = function() {this.src='images/1-0.gif'};
}
}
mtDropDown.renderAll();
mtDropDown.initialize();
}
}
/*********************************************************************************************************************/
2. <script language="javascript" src="jscript/MenuDesc.js" charset="gb2312"></script>
//此脚本出自网易（www.163.com）
////////////////////////////////////////////////////////////////////////////////////
// CONFIGURATION
////////////////////////////////////////////////////////////////////////////////////
// 主背景色（大区域）
// 通常使用明快的颜色（浅黄色等...）
if (typeof fcolor == 'undefined') { var fcolor = "ffffff";}
// Border的颜色和标题栏的颜色；
// 通常的颜色深（褐色，黑色等。）
if (typeof backcolor == 'undefined') { var backcolor = "#CDCDCD";}
// 文字的颜色
// 通常是比较深的颜色；
if (typeof textcolor == 'undefined') { var textcolor = "#999900";}
// 标题的颜色
// 通常是明快的颜色；
if (typeof capcolor == 'undefined') { var capcolor = "#FFFFFF";}
// "Close"的颜色
// 通常是明快的颜色；
if (typeof closecolor == 'undefined') { var closecolor = "#9999FF";}
// 弹出的窗口的宽度；
// 100-300 pixels 合适
if (typeof width == 'undefined') { var width = "300";}
// 边缘的宽度，象素。
// 1-3 pixels 合适
if (typeof border == 'undefined') { var border = "1";}
// 弹出窗口位于鼠标左侧或者右侧的距离，象素。
// 3-12合适
if (typeof offsetx == 'undefined') { var offsetx = 10;}
// 弹出窗口位于鼠标下方的距离；
// 3-12 合适
if (typeof offsety == 'undefined') { var offsety = 10;}
///////////////////////////////////////////////////////////////////////////////////
// 设置结束
///////////////////////////////////////////////////////////////////////////////////
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
// Microsoft Stupidity Check.
if (ie4) {
if (navigator.userAgent.indexOf('MSIE 5')>0) {
ie5 = true;
} else {
ie5 = false; }
} else {
ie5 = false;
}
var descx = 0;
var descy = 0;
var snow = 0;
var sw = 0;
var cnt = 0;
var dir = 1;
var tr=1;
if ( (ns4) || (ie4) ) {
if (ns4) over = document.overDiv
if (ie4) over = overDiv.style
document.onmousemove = mouseMove
if (ns4) document.captureEvents(Event.MOUSEMOVE)
}
// 以下是页面中使用的公共函数；
// Simple popup right
function drs(text,wid) {
dts(1,text,wid);
}
// Clears popups if appropriate
function nd() {
if ( cnt >= 1 ) { sw = 0 };
if ( (ns4) || (ie4) ) {
if ( sw == 0 ) {
snow = 0;
hideObject(over);
} else {
cnt++;
}
}
}
// 非公共函数，被其它的函数调用；
// Simple popup
function dts(d,text,wid) {
txt = "<TABLE class=\"menuDesc\" WIDTH="+wid+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD style=\"PADDING-TOP:6px;\"><FONT FACE=\"宋体\" COLOR=\""+textcolor+"\"> "+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir = d;
disp()
}
// Common calls
function disp() {
if ( (ns4) || (ie4) ) {
if (snow == 0) {
if (dir == 2) { // Center
moveTo(over,descx+offsetx-(width/2) ,descy+offsety);
}
if (dir == 1) { // Right
moveTo(over,descx+offsetx,descy+offsety);
}
if (dir == 0) { // Left
moveTo(over,descx-offsetx-width,descy+offsety);
}
showObject(over);
snow = 1;
}
}
// Here you can make the text goto the statusbar.
}
// Moves the layer
function mouseMove(e) {
/* 2005-07-31 添加的代码
xleft 与 ytop 是从 GlideMenu.js 中传出来的绝对定位
*/
if (ns4) {descx=e.pageX+xleft; descy=e.pageY+ytop;}
if (ie4) {descx=event.x+document.body.scrollLeft+xleft; descy=event.y+document.body.scrollTop+ytop;}
if (ie5) {descx=event.x+document.body.scrollLeft+xleft; descy=event.y+document.body.scrollTop+ytop;}
if (snow) {
if (dir == 2) { // Center
moveTo(over,descx+offsetx-(width/2),descy+offsety);
}
if (dir == 1) { // Right
moveTo(over,descx+offsetx,descy+offsety);
}
if (dir == 0) { // Left
moveTo(over,descx-offsetx-width,descy+offsety);
}
}
}
// The Close onMouseOver function for Sticky
function cClick() {
hideObject(over);
sw=0;
}
// Writes to a layer
function layerWrite(txt) {
if (ns4) {
var lyr = document.overDiv.document
lyr.write(txt)
lyr.close()
}
else if (ie4) document.all["overDiv"].innerHTML = txt
over.visibility = "hidden";
if (tr) { }
}
// Make an object visible
function showObject(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
// Hides an object
function hideObject(obj) {
moveTo(obj,0,0)
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
// Move a layer
function moveTo(obj,xL,yL) {
obj.left = xL
obj.top = yL
}
/*********************************************************************************************************************/
3. <SCRIPT language="javascript" src="jscript/GlideMenu.js" charset="gb2312"></SCRIPT>
<!--
//感谢 CSDN 的网友 nba23 提供此脚本
/***** 以下是 2005-07-31 添加的变量，用于记录 Menu 的绝对位置，以便 MenuDesc.js 使用****/
var xleft;
var ytop;
/***** 以上是 2005-07-31 添加的变量 ****/
mtDropDown.spacerGif = "";
mtDropDown.dingbatOn = "";
mtDropDown.dingbatOff = "";
mtDropDown.dingbatSize = 14;
mtDropDown.menuPadding = 1;
mtDropDown.itemPadding = 4;
mtDropDown.shadowSize = 2;
mtDropDown.shadowOffset = 3;
mtDropDown.shadowColor = "#888"; file://菜单边框阴影
mtDropDown.shadowPng = "";
mtDropDown.backgroundColor = "#ffffff"; file://菜单底色
mtDropDown.backgroundPng = "";
mtDropDown.hideDelay = 200; file://菜单隐藏时间
mtDropDown.slideTime = 300; file://菜单显示时间
mtDropDown.reference = {topLeft:1,topRight:2,bottomLeft:3,bottomRight:4};
mtDropDown.direction = {down:1,right:2};
mtDropDown.registry = [];
mtDropDown._maxZ = 100;
mtDropDown.isSupported = function()
{
if (typeof mtDropDown.isSupported.r == "boolean")
return mtDropDown.isSupported.r;
var ua = navigator.userAgent.toLowerCase();
var an = navigator.appName;
var r = false;
if (ua.indexOf("gecko") > -1) r = true;
else if (an == "Microsoft Internet Explorer")
{
if (document.getElementById) r = true;
}
mtDropDown.isSupported.r = r;
return r;
}
mtDropDown.initialize = function()
{
for (var i = 0, menu = null; menu = this.registry[i]; i++)
{
menu.initialize();
}
}
mtDropDown.renderAll = function()
{
var aMenuHtml = [];
for (var i = 0, menu = null; menu = this.registry[i]; i++)
{
aMenuHtml[i] = menu.toString();
}
// document.write(aMenuHtml.join("")); // ——修改前的代码
/***** 以下是 2005-07-31 添加的代码 ****/
document.getElementById("GlideMenuDiv").innerHTML=aMenuHtml.join("");
/***** 以上是 2005-07-31 添加的代码 ****/
}
function mtDropDown(oActuator, iDirection, iLeft, iTop, iReferencePoint, parentMenuSet)
{
this.addItem = addItem;
this.addMenu = addMenu;
this.toString = toString;
this.initialize = initialize;
this.isOpen = false;
this.show = show;
this.hide = hide;
this.items = [];
this.onactivate = new Function();
this.ondeactivate = new Function();
this.onmouseover = new Function();
this.onqueue = new Function();
this.index = mtDropDown.registry.length;
mtDropDown.registry[this.index] = this;
var id = "mtDropDown" + this.index;
var contentHeight = null;
var contentWidth = null;
var childMenuSet = null;
var animating = false;
var childMenus = [];
var slideAccel = -1;
var elmCache = null;
var ready = false;
var _this = this;
var a = null;
var pos = iDirection == mtDropDown.direction.down ? "top" : "left";
var dim = null;
/* ———修改前的代码
function addItem(sText, sUrl)
{
var item = new mtDropDownItem(sText, sUrl, this);
*/
/***** 以下是 2005-07-31 添加的代码，用于附加每个 MenuItem 的说明 ****/
//sText：菜单名称，sUrl：菜单 URL，desc：菜单描述，wid：菜单宽度
function addItem(sText, sUrl,desc,wid)
{
var item = new mtDropDownItem(sText, sUrl, this,desc,wid);
/***** 以上是 2005-07-31 添加的代码 ****/
item._index = this.items.length;
this.items[item._index] = item;
}
function addMenu(oMenuItem)
{
if (!oMenuItem.parentMenu == this) throw new Error("Cannot add a menu here");
if (childMenuSet == null) childMenuSet = new mtDropDownSet(mtDropDown.direction.right, -5, 2, mtDropDown.reference.topRight);
var m = childMenuSet.addMenu(oMenuItem);
childMenus[oMenuItem._index] = m;
m.onmouseover = child_mouseover;
m.ondeactivate = child_deactivate;
m.onqueue = child_queue;
return m;
}
function initialize()
{
initCache();
initEvents();
initSize();
ready = true;
}
function show()
{
if (ready)
{
_this.isOpen = true;
animating = true;
setContainerPos();
elmCache["clip"].style.visibility = "visible";
elmCache["clip"].style.zIndex = mtDropDown._maxZ++;
slideStart();
_this.onactivate();
}
}
function hide()
{
if (ready)
{
_this.isOpen = false;
animating = true;
for (var i = 0, item = null; item = elmCache.item[i]; i++)
dehighlight(item);
if (childMenuSet) childMenuSet.hide();
slideStart();
_this.ondeactivate();
}
}
function setContainerPos()
{
var sub = oActuator.constructor == mtDropDownItem;
var act = sub ? oActuator.parentMenu.elmCache["item"][oActuator._index] : oActuator;
var el = act;
var x = 0;
var y = 0;
var minX = 0;
var maxX = (window.innerWidth ? window.innerWidth : document.body.clientWidth) - parseInt(elmCache["clip"].style.width);
var minY = 0;
var maxY = (window.innerHeight ? window.innerHeight : document.body.clientHeight) - parseInt(elmCache["clip"].style.height);
while (sub ? el.parentNode.className.indexOf("mtDropdownMenu") == -1 : el.offsetParent)
{
x += el.offsetLeft;
y += el.offsetTop;
if (el.scrollLeft) x -= el.scrollLeft;
if (el.scrollTop) y -= el.scrollTop;
el = el.offsetParent;
}
if (oActuator.constructor == mtDropDownItem)
{
x += parseInt(el.parentNode.style.left);
y += parseInt(el.parentNode.style.top);
}
switch (iReferencePoint)
{
case mtDropDown.reference.topLeft:
break;
case mtDropDown.reference.topRight:
x += act.offsetWidth;
break;
case mtDropDown.reference.bottomLeft:
y += act.offsetHeight;
break;
case mtDropDown.reference.bottomRight:
x += act.offsetWidth;
y += act.offsetHeight;
break;
}
x += iLeft;
y += iTop;
x = Math.max(Math.min(x, maxX), minX);
y = Math.max(Math.min(y, maxY), minY);
xleft=x;
ytop=y;
elmCache["clip"].style.left = x + "px";
elmCache["clip"].style.top = y + "px";
}
function slideStart()
{
var x0 = parseInt(elmCache["content"].style[pos]);
var x1 = _this.isOpen ? 0 : -dim;
if (a != null) a.stop();
a = new Accelimation(x0, x1, mtDropDown.slideTime, slideAccel);
a.onframe = slideFrame;
a.onend = slideEnd;
a.start();
}
function slideFrame(x)
{
elmCache["content"].style[pos] = x + "px";
}
function slideEnd()
{
if (!_this.isOpen) elmCache["clip"].style.visibility = "hidden";
animating = false;
}
function initSize()
{
var ow = elmCache["items"].offsetWidth;
var oh = elmCache["items"].offsetHeight;
var ua = navigator.userAgent.toLowerCase();
elmCache["clip"].style.width = ow + mtDropDown.shadowSize + 2 + "px";
elmCache["clip"].style.height = oh + mtDropDown.shadowSize + 2 + "px";
elmCache["content"].style.width = ow + mtDropDown.shadowSize + "px";
elmCache["content"].style.height = oh + mtDropDown.shadowSize + "px";
contentHeight = oh + mtDropDown.shadowSize;
contentWidth = ow + mtDropDown.shadowSize;
dim = iDirection == mtDropDown.direction.down ? contentHeight : contentWidth;
elmCache["content"].style[pos] = -dim - mtDropDown.shadowSize + "px";
elmCache["clip"].style.visibility = "hidden";
if (ua.indexOf("mac") == -1 || ua.indexOf("gecko") > -1)
{
elmCache["background"].style.width = ow + "px";
elmCache["background"].style.height = oh + "px";
elmCache["background"].style.backgroundColor = mtDropDown.backgroundColor;
elmCache["shadowRight"].style.left = ow + "px";
elmCache["shadowRight"].style.height = oh - (mtDropDown.shadowOffset - mtDropDown.shadowSize) + "px";
elmCache["shadowRight"].style.backgroundColor = mtDropDown.shadowColor;
elmCache["shadowBottom"].style.top = oh + "px";
elmCache["shadowBottom"].style.width = ow - mtDropDown.shadowOffset + "px";
elmCache["shadowBottom"].style.backgroundColor = mtDropDown.shadowColor;
}
else
{
elmCache["background"].firstChild.src = mtDropDown.backgroundPng;
elmCache["background"].firstChild.width = ow;
elmCache["background"].firstChild.height = oh;
elmCache["shadowRight"].firstChild.src = mtDropDown.shadowPng;
elmCache["shadowRight"].style.left = ow + "px";
elmCache["shadowRight"].firstChild.width = mtDropDown.shadowSize;
elmCache["shadowRight"].firstChild.height = oh - (mtDropDown.shadowOffset - mtDropDown.shadowSize);
elmCache["shadowBottom"].firstChild.src = mtDropDown.shadowPng;
elmCache["shadowBottom"].style.top = oh + "px";
elmCache["shadowBottom"].firstChild.height = mtDropDown.shadowSize;
elmCache["shadowBottom"].firstChild.width = ow - mtDropDown.shadowOffset;
}
}
function initCache()
{
var menu = document.getElementById(id);
var all = menu.all ? menu.all : menu.getElementsByTagName("*");
elmCache = {};
elmCache["clip"] = menu;
elmCache["item"] = [];
for (var i = 0, elm = null; elm = all[i]; i++)
{
switch (elm.className)
{
case "items":
case "content":
case "background":
case "shadowRight":
case "shadowBottom":
elmCache[elm.className] = elm;
break;
case "item":
elm._index = elmCache["item"].length;
elmCache["item"][elm._index] = elm;
break;
}
}
_this.elmCache = elmCache;
}
function initEvents()
{
for (var i = 0, item = null; item = elmCache.item[i]; i++)
{
item.onmouseover = item_mouseover;
item.onmouseout = item_mouseout;
item.onclick = item_click;
}
if (typeof oActuator.tagName != "undefined")
{
oActuator.onmouseover = actuator_mouseover;
oActuator.onmouseout = actuator_mouseout;
}
elmCache["content"].onmouseover = content_mouseover;
elmCache["content"].onmouseout = content_mouseout;
}
function highlight(oRow)
{
oRow.className = "item hover";
if (childMenus[oRow._index])
oRow.lastChild.firstChild.src = mtDropDown.dingbatOn;
}
function dehighlight(oRow)
{
oRow.className = "item";
if (childMenus[oRow._index])
oRow.lastChild.firstChild.src = mtDropDown.dingbatOff;
}
function item_mouseover()
{
if (!animating)
{
highlight(this);
if (childMenus[this._index])
childMenuSet.showMenu(childMenus[this._index]);
else if (childMenuSet) childMenuSet.hide();
}
}
function item_mouseout()
{
if (!animating)
{
if (childMenus[this._index])
childMenuSet.hideMenu(childMenus[this._index]);
else
dehighlight(this);
}
}
function item_click()
{
if (!animating)
{
if (_this.items[this._index].url)
/* ———修改前的代码
//location.href = _this.items[this._index].url;
*/
/***** 以下是 2005-07-31 添加的代码，我需要在新窗口打开链接 ****/
window.open( _this.items[this._index].url);
/***** 以上是 2005-07-31 添加的代码 ****/
}
}
function actuator_mouseover()
{
parentMenuSet.showMenu(_this);
}
function actuator_mouseout()
{
parentMenuSet.hideMenu(_this);
}
function content_mouseover()
{
if (!animating)
{
parentMenuSet.showMenu(_this);
_this.onmouseover();
}
}
function content_mouseout()
{
if (!animating)
{
parentMenuSet.hideMenu(_this);
}
}
function child_mouseover()
{
if (!animating)
{
parentMenuSet.showMenu(_this);
}
}
function child_deactivate()
{
for (var i = 0; i < childMenus.length; i++)
{
if (childMenus[i] == this)
{
dehighlight(elmCache["item"][i]);
break;
}
}
}
function child_queue()
{
parentMenuSet.hideMenu(_this);
}
function toString()
{
var aHtml = [];
var sClassName = "mtDropdownMenu" + (oActuator.constructor != mtDropDownItem ? " top" : "");
for (var i = 0, item = null; item = this.items[i]; i++)
{
aHtml[i] = item.toString(childMenus[i]);
}
return str = '<div style="POSITION: absolute" id="' + id + '" class="' + sClassName + '">' +
'<div class="content"><table class="items" cellpadding="0" cellspacing="0" border="0">' +
'<tr><td colspan="2"><img src="' + mtDropDown.spacerGif + '" width="1" height="' + mtDropDown.menuPadding + '"></td></tr>' +
aHtml.join('') +
'<tr><td colspan="2"><img src="' + mtDropDown.spacerGif + '" width="1" height="' + mtDropDown.menuPadding + '"></td></tr></table>' +
'<div class="shadowBottom"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' +
'<div class="shadowRight"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' +
'<div class="background"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' +
'</div></div>';
}
}
//mtDropDown 结束
mtDropDownSet.registry = [];
function mtDropDownSet(iDirection, iLeft, iTop, iReferencePoint)
{
this.addMenu = addMenu;
this.showMenu = showMenu;
this.hideMenu = hideMenu;
this.hide = hide;
var menus = [];
var _this = this;
var current = null;
this.index = mtDropDownSet.registry.length;
mtDropDownSet.registry[this.index] = this;
function addMenu(oActuator)
{
var m = new mtDropDown(oActuator, iDirection, iLeft, iTop, iReferencePoint, this);
menus[menus.length] = m;
return m;
}
function showMenu(oMenu)
{
if (oMenu != current)
{
if (current != null) hide(current);
current = oMenu;
oMenu.show();
}
else
{
cancelHide(oMenu);
}
}
function hideMenu(oMenu)
{
if (current == oMenu && oMenu.isOpen)
{
if (!oMenu.hideTimer) scheduleHide(oMenu);
}
}
function scheduleHide(oMenu)
{
oMenu.onqueue();
oMenu.hideTimer = window.setTimeout("mtDropDownSet.registry[" + _this.index + "].hide(mtDropDown.registry[" + oMenu.index + "])", mtDropDown.hideDelay);
}
function cancelHide(oMenu)
{
if (oMenu.hideTimer)
{
window.clearTimeout(oMenu.hideTimer);
oMenu.hideTimer = null;
}
}
function hide(oMenu)
{
if (!oMenu && current) oMenu = current;
if (oMenu && current == oMenu && oMenu.isOpen)
{
cancelHide(oMenu);
current = null;
oMenu.hideTimer = null;
oMenu.hide();
}
}
}
//mtDropDownSet 结束
function mtDropDownItem(sText, sUrl, oParent,desc,wid)
{
this.toString = toString;
this.text = sText;
this.url = sUrl;
this.parentMenu = oParent;
function toString(bDingbat)
{
var sDingbat = bDingbat ? mtDropDown.dingbatOff : mtDropDown.spacerGif;
var iEdgePadding = mtDropDown.itemPadding + mtDropDown.menuPadding;
var sPaddingLeft = "padding:" + mtDropDown.itemPadding + "px; padding-left:" + iEdgePadding + "px;"
var sPaddingRight = "padding:" + mtDropDown.itemPadding + "px; padding-right:" + iEdgePadding + "px;"
return '<tr class="item"><td nowrap style="' + sPaddingLeft + '"'+
/***** 以下是 2005-07-31 添加的代码，用于附加每个 MenuItem 的说明 ****/
' onmouseover=\'drs("'+ desc +'",'+wid+');\' onmouseout="nd();"'+
/***** 以上是 2005-07-31 添加的代码 ****/
'>' + sText + '</td></tr>';
<!-- Text + '</td><td width="14" style="' + sPaddingRight + '">' + </td></tr>'; -->
}
}
function Accelimation(from, to, time, zip)
{
if (typeof zip == "undefined") zip = 0;
if (typeof unit == "undefined") unit = "px";
this.x0 = from;
this.x1 = to;
this.dt = time;
this.zip = -zip;
this.unit = unit;
this.timer = null;
this.onend = new Function();
this.onframe = new Function();
}
Accelimation.prototype.start = function()
{
this.t0 = new Date().getTime();
this.t1 = this.t0 + this.dt;
var dx = this.x1 - this.x0;
this.c1 = this.x0 + ((1 + this.zip) * dx / 3);
this.c2 = this.x0 + ((2 + this.zip) * dx / 3);
Accelimation._add(this);
}
Accelimation.prototype.stop = function()
{
Accelimation._remove(this);
}
Accelimation.prototype._paint = function(time)
{
if (time < this.t1)
{
var elapsed = time - this.t0;
this.onframe(Accelimation._getBezier(elapsed/this.dt,this.x0,this.x1,this.c1,this.c2));
}
else this._end();
}
Accelimation.prototype._end = function()
{
Accelimation._remove(this);
this.onframe(this.x1);
this.onend();
}
Accelimation._add = function(o)
{
var index = this.instances.length;
this.instances[index] = o;
if (this.instances.length == 1)
{
this.timerID = window.setInterval("Accelimation._paintAll()", this.targetRes);
}
}
Accelimation._remove = function(o)
{
for (var i = 0; i < this.instances.length; i++)
{
if (o == this.instances[i])
{
this.instances = this.instances.slice(0,i).concat( this.instances.slice(i+1) );
break;
}
}
if (this.instances.length == 0)
{
window.clearInterval(this.timerID);
this.timerID = null;
}
}
Accelimation._paintAll = function()
{
var now = new Date().getTime();
for (var i = 0; i < this.instances.length; i++)
{
this.instances[i]._paint(now);
}
}
Accelimation._B1 = function(t) { return t*t*t }
Accelimation._B2 = function(t) { return 3*t*t*(1-t) }
Accelimation._B3 = function(t) { return 3*t*(1-t)*(1-t) }
Accelimation._B4 = function(t) { return (1-t)*(1-t)*(1-t) }
Accelimation._getBezier = function(percent,startPos,endPos,control1,control2)
{
return endPos * this._B1(percent) + control2 * this._B2(percent) + control1 * this._B3(percent) + startPos * this._B4(percent);
}
Accelimation.instances = [];
Accelimation.targetRes = 10;
Accelimation.timerID = null;
//-->
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=447860
一、在<body>之前引入脚本“GlideMenu.js”
<SCRIPT language="javascript" src="jscript/GlideMenu.js" charset="gb2312"></SCRIPT>
二、在<body>之前，加载需要直接在页面上运行的初始化脚本
<script language="javascript">
if (mtDropDown.isSupported())
{
ms = new mtDropDownSet(mtDropDown.direction.down, 0, 0, mtDropDown.reference.bottomLeft);
}
</script>
注：mtDropDown.direction.down 代表菜单从上往下滑动；”down” 换成 “right” 表示从左往右滑动出现（菜单项目较多时，比较适用）
mtDropDown.reference.bottomLeft 中的 ”bottomLeft” 也可换成以下几种情况（在此不一一解释了，各位自行体会）：
“topLeft”、”topRight”、”bottomRight”
三、在<body>中必须拥有以下两个需要用到的 Div
<DIV id="GlideMenuDiv" style="VISIBILITY: hidden;"></DIV>
<DIV id="overDiv" style="Z-INDEX: 1001;VISIBILITY: hidden;POSITION: absolute"></DIV>
四、在<body>结束之前，依次引入以下语句，注意顺序不能乱
<xml src="GlideMenu.xml" id="MenuXML"></xml>
<script language="javascript" src="jscript/MenuDesc.js" charset="gb2312"></script>
<script language="javascript" src="jscript/AddMenu.js" charset="gb2312"></script>
五、关联 body 的 onload 事件（“jscript/AddMenu.js”中的“WebInit()”）
<body onload="WebInit()">
六、给需要加载滑动菜单的节点赋于 ID ，并选择样式
例如：<span id="AccessMenu" class="siteType"> Access 站点</span>
七、编辑 XML 文档 “GlideMenu.xml”
例如：为 id="AccessMenu" 添加以下菜单节点
<?xml version="1.0" encoding="utf-8" ?>
<GlideMenu>
<MenuNode id="AccessMenu">
<MenuItem MenuName="IT 内部网" URL="../SoftWeb/Login.aspx">
IT 部内部管理系统主要功能<UL><li>成员注册、审批<li>申请加班、填写请假条、及请假期间的工作代理<li>领用物品申请，物品及库存管理<li>专案进度管理、会议室预约<li>公告、软件管理、电子相册</li><li>用户、群组权限的设定</li></UL>
</MenuItem>
<MenuItem MenuName="<未知系统>" URL="">
尚未布署 ^_^
</MenuItem>
<MenuItem MenuName="<未知系统>" URL="" width="100">
尚未布署 ^_^
</MenuItem>
</MenuNode>
</GlideMenu>
GlideMenu.xml 的格式要求：
1. <MenuNode id="AccessMenu"> 节点要有 id 属性，对应 <span id="AccessMenu">
2. <MenuItem MenuName="IT 内部网" URL="../SoftWeb/Login.aspx"> “ MenuName”指呈现在页面的菜单名称；“URL”是你需要跳转的页面网址；“width”是指定菜单注释的宽度，注意不是菜单的宽度
3. <MenuItem> 节点中的文本就是跟随鼠标的注释，注意此文本不能出现换行
4. 菜单名称与注释支持 HTML 显示，但必须将 "<" 换成 " < " 、将 ">" 换成 " > "。如：将
<UL> <li> 成员注册、审批 </li></UL>
转换成
<UL><li>成员注册、审批</li></UL>
八、加上样式，使得菜单变得透明
.siteType{cursor:hand;color : #6600cc}
.menuDesc{ FILTER: alpha(opacity=85);}
.mtDropdownMenu { LEFT: -1imagespx; OVERFLOW: hidden; POSITION: absolute; TOP: -1imagespx }
.mtDropdownMenu .content { POSITION: absolute }
.mtDropdownMenu .items { BORDER-BOTTOM: #999 1px solid; BORDER-LEFT: #999 1px solid; BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; LEFT: 0px; POSITION: relative; TOP: 0px; Z-INDEX: 2 }
.mtDropdownMenu .item { BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-RIGHT: medium none; BORDER-TOP: medium none; COLOR: #0000cc; CURSOR: hand; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"; FONT-SIZE: 12px; TEXT-DECORATION: none; EXT-DECORATION: none }
.mtDropdownMenu .background { FILTER: alpha(opacity=70); LEFT: 0px; POSITION: absolute; TOP: 0px; Z-INDEX: 1; moz-opacity: .8 }
.mtDropdownMenu .shadowRight { FILTER: alpha(opacity=40); POSITION: absolute; TOP: 3px; WIDTH: 2px; Z-INDEX: 3; moz-opacity: .4 }
.mtDropdownMenu .shadowBottom { FILTER: alpha(opacity=40); HEIGHT: 2px; LEFT: 3px; POSITION: absolute; Z-INDEX: 1; moz-opacity: .4 }
.mtDropdownMenu .hover { BACKGROUND: #cccccc; COLOR: #ffffff }
.mtDropdownMenu .item IMG { MARGIN-LEFT: 10px }
九、附上脚本文件“AddMenu.js”“MenuDesc.js”“GlideMenu.js”
1. <script language="javascript" src="jscript/AddMenu.js" charset="gb2312"></script>
function WebInit()
{
if (mtDropDown.isSupported())
{
/*
var x_doc = new ActiveXObject("Msxml2.DomDocument");
x_doc.async = false;
x_doc.setProperty("ServerHTTPRequest", true);
x_doc.load("GlideMenu.xml");
*/
var x_doc =document.getElementById("MenuXML").XMLDocument;
var x_nodes = x_doc.selectNodes("GlideMenu//MenuNode");
for(var i=0;i< x_nodes.length;i++)
{
var menuID = x_nodes[i].attributes.getNamedItem("id").value;
var menu = document.getElementById(menuID);
if(menu == null){continue;}
var menuObj = ms.addMenu(menu);
var x_items = x_nodes[i].selectNodes("MenuItem");
for( var j=0;j<x_items.length;j++)
{
if(x_items[j].attributes.getNamedItem("width") == null)
{
menuObj.addItem(x_items[j].attributes.getNamedItem("MenuName").value,x_items[j].attributes.getNamedItem("URL").value,x_items[j].text);
}
else
{
menuObj.addItem(x_items[j].attributes.getNamedItem("MenuName").value,x_items[j].attributes.getNamedItem("URL").value,x_items[j].text,x_items[j].attributes.getNamedItem("width").value);
}
menuObj.onactivate = function() {this.src='images/1-1.gif'};
menuObj.ondeactivate = function() {this.src='images/1-0.gif'};
}
}
mtDropDown.renderAll();
mtDropDown.initialize();
}
}
/*********************************************************************************************************************/
2. <script language="javascript" src="jscript/MenuDesc.js" charset="gb2312"></script>
//此脚本出自网易（www.163.com）
////////////////////////////////////////////////////////////////////////////////////
// CONFIGURATION
////////////////////////////////////////////////////////////////////////////////////
// 主背景色（大区域）
// 通常使用明快的颜色（浅黄色等...）
if (typeof fcolor == 'undefined') { var fcolor = "ffffff";}
// Border的颜色和标题栏的颜色；
// 通常的颜色深（褐色，黑色等。）
if (typeof backcolor == 'undefined') { var backcolor = "#CDCDCD";}
// 文字的颜色
// 通常是比较深的颜色；
if (typeof textcolor == 'undefined') { var textcolor = "#999900";}
// 标题的颜色
// 通常是明快的颜色；
if (typeof capcolor == 'undefined') { var capcolor = "#FFFFFF";}
// "Close"的颜色
// 通常是明快的颜色；
if (typeof closecolor == 'undefined') { var closecolor = "#9999FF";}
// 弹出的窗口的宽度；
// 100-300 pixels 合适
if (typeof width == 'undefined') { var width = "300";}
// 边缘的宽度，象素。
// 1-3 pixels 合适
if (typeof border == 'undefined') { var border = "1";}
// 弹出窗口位于鼠标左侧或者右侧的距离，象素。
// 3-12合适
if (typeof offsetx == 'undefined') { var offsetx = 10;}
// 弹出窗口位于鼠标下方的距离；
// 3-12 合适
if (typeof offsety == 'undefined') { var offsety = 10;}
///////////////////////////////////////////////////////////////////////////////////
// 设置结束
///////////////////////////////////////////////////////////////////////////////////
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
// Microsoft Stupidity Check.
if (ie4) {
if (navigator.userAgent.indexOf('MSIE 5')>0) {
ie5 = true;
} else {
ie5 = false; }
} else {
ie5 = false;
}
var descx = 0;
var descy = 0;
var snow = 0;
var sw = 0;
var cnt = 0;
var dir = 1;
var tr=1;
if ( (ns4) || (ie4) ) {
if (ns4) over = document.overDiv
if (ie4) over = overDiv.style
document.onmousemove = mouseMove
if (ns4) document.captureEvents(Event.MOUSEMOVE)
}
// 以下是页面中使用的公共函数；
// Simple popup right
function drs(text,wid) {
dts(1,text,wid);
}
// Clears popups if appropriate
function nd() {
if ( cnt >= 1 ) { sw = 0 };
if ( (ns4) || (ie4) ) {
if ( sw == 0 ) {
snow = 0;
hideObject(over);
} else {
cnt++;
}
}
}
// 非公共函数，被其它的函数调用；
// Simple popup
function dts(d,text,wid) {
txt = "<TABLE class=\"menuDesc\" WIDTH="+wid+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD style=\"PADDING-TOP:6px;\"><FONT FACE=\"宋体\" COLOR=\""+textcolor+"\"> "+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir = d;
disp()
}
// Common calls
function disp() {
if ( (ns4) || (ie4) ) {
if (snow == 0) {
if (dir == 2) { // Center
moveTo(over,descx+offsetx-(width/2) ,descy+offsety);
}
if (dir == 1) { // Right
moveTo(over,descx+offsetx,descy+offsety);
}
if (dir == 0) { // Left
moveTo(over,descx-offsetx-width,descy+offsety);
}
showObject(over);
snow = 1;
}
}
// Here you can make the text goto the statusbar.
}
// Moves the layer
function mouseMove(e) {
/* 2005-07-31 添加的代码
xleft 与 ytop 是从 GlideMenu.js 中传出来的绝对定位
*/
if (ns4) {descx=e.pageX+xleft; descy=e.pageY+ytop;}
if (ie4) {descx=event.x+document.body.scrollLeft+xleft; descy=event.y+document.body.scrollTop+ytop;}
if (ie5) {descx=event.x+document.body.scrollLeft+xleft; descy=event.y+document.body.scrollTop+ytop;}
if (snow) {
if (dir == 2) { // Center
moveTo(over,descx+offsetx-(width/2),descy+offsety);
}
if (dir == 1) { // Right
moveTo(over,descx+offsetx,descy+offsety);
}
if (dir == 0) { // Left
moveTo(over,descx-offsetx-width,descy+offsety);
}
}
}
// The Close onMouseOver function for Sticky
function cClick() {
hideObject(over);
sw=0;
}
// Writes to a layer
function layerWrite(txt) {
if (ns4) {
var lyr = document.overDiv.document
lyr.write(txt)
lyr.close()
}
else if (ie4) document.all["overDiv"].innerHTML = txt
over.visibility = "hidden";
if (tr) { }
}
// Make an object visible
function showObject(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
// Hides an object
function hideObject(obj) {
moveTo(obj,0,0)
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
// Move a layer
function moveTo(obj,xL,yL) {
obj.left = xL
obj.top = yL
}
/*********************************************************************************************************************/
3. <SCRIPT language="javascript" src="jscript/GlideMenu.js" charset="gb2312"></SCRIPT>
<!--
//感谢 CSDN 的网友 nba23 提供此脚本
/***** 以下是 2005-07-31 添加的变量，用于记录 Menu 的绝对位置，以便 MenuDesc.js 使用****/
var xleft;
var ytop;
/***** 以上是 2005-07-31 添加的变量 ****/
mtDropDown.spacerGif = "";
mtDropDown.dingbatOn = "";
mtDropDown.dingbatOff = "";
mtDropDown.dingbatSize = 14;
mtDropDown.menuPadding = 1;
mtDropDown.itemPadding = 4;
mtDropDown.shadowSize = 2;
mtDropDown.shadowOffset = 3;
mtDropDown.shadowColor = "#888"; file://菜单边框阴影
mtDropDown.shadowPng = "";
mtDropDown.backgroundColor = "#ffffff"; file://菜单底色
mtDropDown.backgroundPng = "";
mtDropDown.hideDelay = 200; file://菜单隐藏时间
mtDropDown.slideTime = 300; file://菜单显示时间
mtDropDown.reference = {topLeft:1,topRight:2,bottomLeft:3,bottomRight:4};
mtDropDown.direction = {down:1,right:2};
mtDropDown.registry = [];
mtDropDown._maxZ = 100;
mtDropDown.isSupported = function()
{
if (typeof mtDropDown.isSupported.r == "boolean")
return mtDropDown.isSupported.r;
var ua = navigator.userAgent.toLowerCase();
var an = navigator.appName;
var r = false;
if (ua.indexOf("gecko") > -1) r = true;
else if (an == "Microsoft Internet Explorer")
{
if (document.getElementById) r = true;
}
mtDropDown.isSupported.r = r;
return r;
}
mtDropDown.initialize = function()
{
for (var i = 0, menu = null; menu = this.registry[i]; i++)
{
menu.initialize();
}
}
mtDropDown.renderAll = function()
{
var aMenuHtml = [];
for (var i = 0, menu = null; menu = this.registry[i]; i++)
{
aMenuHtml[i] = menu.toString();
}
// document.write(aMenuHtml.join("")); // ——修改前的代码
/***** 以下是 2005-07-31 添加的代码 ****/
document.getElementById("GlideMenuDiv").innerHTML=aMenuHtml.join("");
/***** 以上是 2005-07-31 添加的代码 ****/
}
function mtDropDown(oActuator, iDirection, iLeft, iTop, iReferencePoint, parentMenuSet)
{
this.addItem = addItem;
this.addMenu = addMenu;
this.toString = toString;
this.initialize = initialize;
this.isOpen = false;
this.show = show;
this.hide = hide;
this.items = [];
this.onactivate = new Function();
this.ondeactivate = new Function();
this.onmouseover = new Function();
this.onqueue = new Function();
this.index = mtDropDown.registry.length;
mtDropDown.registry[this.index] = this;
var id = "mtDropDown" + this.index;
var contentHeight = null;
var contentWidth = null;
var childMenuSet = null;
var animating = false;
var childMenus = [];
var slideAccel = -1;
var elmCache = null;
var ready = false;
var _this = this;
var a = null;
var pos = iDirection == mtDropDown.direction.down ? "top" : "left";
var dim = null;
/* ———修改前的代码
function addItem(sText, sUrl)
{
var item = new mtDropDownItem(sText, sUrl, this);
*/
/***** 以下是 2005-07-31 添加的代码，用于附加每个 MenuItem 的说明 ****/
//sText：菜单名称，sUrl：菜单 URL，desc：菜单描述，wid：菜单宽度
function addItem(sText, sUrl,desc,wid)
{
var item = new mtDropDownItem(sText, sUrl, this,desc,wid);
/***** 以上是 2005-07-31 添加的代码 ****/
item._index = this.items.length;
this.items[item._index] = item;
}
function addMenu(oMenuItem)
{
if (!oMenuItem.parentMenu == this) throw new Error("Cannot add a menu here");
if (childMenuSet == null) childMenuSet = new mtDropDownSet(mtDropDown.direction.right, -5, 2, mtDropDown.reference.topRight);
var m = childMenuSet.addMenu(oMenuItem);
childMenus[oMenuItem._index] = m;
m.onmouseover = child_mouseover;
m.ondeactivate = child_deactivate;
m.onqueue = child_queue;
return m;
}
function initialize()
{
initCache();
initEvents();
initSize();
ready = true;
}
function show()
{
if (ready)
{
_this.isOpen = true;
animating = true;
setContainerPos();
elmCache["clip"].style.visibility = "visible";
elmCache["clip"].style.zIndex = mtDropDown._maxZ++;
slideStart();
_this.onactivate();
}
}
function hide()
{
if (ready)
{
_this.isOpen = false;
animating = true;
for (var i = 0, item = null; item = elmCache.item[i]; i++)
dehighlight(item);
if (childMenuSet) childMenuSet.hide();
slideStart();
_this.ondeactivate();
}
}
function setContainerPos()
{
var sub = oActuator.constructor == mtDropDownItem;
var act = sub ? oActuator.parentMenu.elmCache["item"][oActuator._index] : oActuator;
var el = act;
var x = 0;
var y = 0;
var minX = 0;
var maxX = (window.innerWidth ? window.innerWidth : document.body.clientWidth) - parseInt(elmCache["clip"].style.width);
var minY = 0;
var maxY = (window.innerHeight ? window.innerHeight : document.body.clientHeight) - parseInt(elmCache["clip"].style.height);
while (sub ? el.parentNode.className.indexOf("mtDropdownMenu") == -1 : el.offsetParent)
{
x += el.offsetLeft;
y += el.offsetTop;
if (el.scrollLeft) x -= el.scrollLeft;
if (el.scrollTop) y -= el.scrollTop;
el = el.offsetParent;
}
if (oActuator.constructor == mtDropDownItem)
{
x += parseInt(el.parentNode.style.left);
y += parseInt(el.parentNode.style.top);
}
switch (iReferencePoint)
{
case mtDropDown.reference.topLeft:
break;
case mtDropDown.reference.topRight:
x += act.offsetWidth;
break;
case mtDropDown.reference.bottomLeft:
y += act.offsetHeight;
break;
case mtDropDown.reference.bottomRight:
x += act.offsetWidth;
y += act.offsetHeight;
break;
}
x += iLeft;
y += iTop;
x = Math.max(Math.min(x, maxX), minX);
y = Math.max(Math.min(y, maxY), minY);
xleft=x;
ytop=y;
elmCache["clip"].style.left = x + "px";
elmCache["clip"].style.top = y + "px";
}
function slideStart()
{
var x0 = parseInt(elmCache["content"].style[pos]);
var x1 = _this.isOpen ? 0 : -dim;
if (a != null) a.stop();
a = new Accelimation(x0, x1, mtDropDown.slideTime, slideAccel);
a.onframe = slideFrame;
a.onend = slideEnd;
a.start();
}
function slideFrame(x)
{
elmCache["content"].style[pos] = x + "px";
}
function slideEnd()
{
if (!_this.isOpen) elmCache["clip"].style.visibility = "hidden";
animating = false;
}
function initSize()
{
var ow = elmCache["items"].offsetWidth;
var oh = elmCache["items"].offsetHeight;
var ua = navigator.userAgent.toLowerCase();
elmCache["clip"].style.width = ow + mtDropDown.shadowSize + 2 + "px";
elmCache["clip"].style.height = oh + mtDropDown.shadowSize + 2 + "px";
elmCache["content"].style.width = ow + mtDropDown.shadowSize + "px";
elmCache["content"].style.height = oh + mtDropDown.shadowSize + "px";
contentHeight = oh + mtDropDown.shadowSize;
contentWidth = ow + mtDropDown.shadowSize;
dim = iDirection == mtDropDown.direction.down ? contentHeight : contentWidth;
elmCache["content"].style[pos] = -dim - mtDropDown.shadowSize + "px";
elmCache["clip"].style.visibility = "hidden";
if (ua.indexOf("mac") == -1 || ua.indexOf("gecko") > -1)
{
elmCache["background"].style.width = ow + "px";
elmCache["background"].style.height = oh + "px";
elmCache["background"].style.backgroundColor = mtDropDown.backgroundColor;
elmCache["shadowRight"].style.left = ow + "px";
elmCache["shadowRight"].style.height = oh - (mtDropDown.shadowOffset - mtDropDown.shadowSize) + "px";
elmCache["shadowRight"].style.backgroundColor = mtDropDown.shadowColor;
elmCache["shadowBottom"].style.top = oh + "px";
elmCache["shadowBottom"].style.width = ow - mtDropDown.shadowOffset + "px";
elmCache["shadowBottom"].style.backgroundColor = mtDropDown.shadowColor;
}
else
{
elmCache["background"].firstChild.src = mtDropDown.backgroundPng;
elmCache["background"].firstChild.width = ow;
elmCache["background"].firstChild.height = oh;
elmCache["shadowRight"].firstChild.src = mtDropDown.shadowPng;
elmCache["shadowRight"].style.left = ow + "px";
elmCache["shadowRight"].firstChild.width = mtDropDown.shadowSize;
elmCache["shadowRight"].firstChild.height = oh - (mtDropDown.shadowOffset - mtDropDown.shadowSize);
elmCache["shadowBottom"].firstChild.src = mtDropDown.shadowPng;
elmCache["shadowBottom"].style.top = oh + "px";
elmCache["shadowBottom"].firstChild.height = mtDropDown.shadowSize;
elmCache["shadowBottom"].firstChild.width = ow - mtDropDown.shadowOffset;
}
}
function initCache()
{
var menu = document.getElementById(id);
var all = menu.all ? menu.all : menu.getElementsByTagName("*");
elmCache = {};
elmCache["clip"] = menu;
elmCache["item"] = [];
for (var i = 0, elm = null; elm = all[i]; i++)
{
switch (elm.className)
{
case "items":
case "content":
case "background":
case "shadowRight":
case "shadowBottom":
elmCache[elm.className] = elm;
break;
case "item":
elm._index = elmCache["item"].length;
elmCache["item"][elm._index] = elm;
break;
}
}
_this.elmCache = elmCache;
}
function initEvents()
{
for (var i = 0, item = null; item = elmCache.item[i]; i++)
{
item.onmouseover = item_mouseover;
item.onmouseout = item_mouseout;
item.onclick = item_click;
}
if (typeof oActuator.tagName != "undefined")
{
oActuator.onmouseover = actuator_mouseover;
oActuator.onmouseout = actuator_mouseout;
}
elmCache["content"].onmouseover = content_mouseover;
elmCache["content"].onmouseout = content_mouseout;
}
function highlight(oRow)
{
oRow.className = "item hover";
if (childMenus[oRow._index])
oRow.lastChild.firstChild.src = mtDropDown.dingbatOn;
}
function dehighlight(oRow)
{
oRow.className = "item";
if (childMenus[oRow._index])
oRow.lastChild.firstChild.src = mtDropDown.dingbatOff;
}
function item_mouseover()
{
if (!animating)
{
highlight(this);
if (childMenus[this._index])
childMenuSet.showMenu(childMenus[this._index]);
else if (childMenuSet) childMenuSet.hide();
}
}
function item_mouseout()
{
if (!animating)
{
if (childMenus[this._index])
childMenuSet.hideMenu(childMenus[this._index]);
else
dehighlight(this);
}
}
function item_click()
{
if (!animating)
{
if (_this.items[this._index].url)
/* ———修改前的代码
//location.href = _this.items[this._index].url;
*/
/***** 以下是 2005-07-31 添加的代码，我需要在新窗口打开链接 ****/
window.open( _this.items[this._index].url);
/***** 以上是 2005-07-31 添加的代码 ****/
}
}
function actuator_mouseover()
{
parentMenuSet.showMenu(_this);
}
function actuator_mouseout()
{
parentMenuSet.hideMenu(_this);
}
function content_mouseover()
{
if (!animating)
{
parentMenuSet.showMenu(_this);
_this.onmouseover();
}
}
function content_mouseout()
{
if (!animating)
{
parentMenuSet.hideMenu(_this);
}
}
function child_mouseover()
{
if (!animating)
{
parentMenuSet.showMenu(_this);
}
}
function child_deactivate()
{
for (var i = 0; i < childMenus.length; i++)
{
if (childMenus[i] == this)
{
dehighlight(elmCache["item"][i]);
break;
}
}
}
function child_queue()
{
parentMenuSet.hideMenu(_this);
}
function toString()
{
var aHtml = [];
var sClassName = "mtDropdownMenu" + (oActuator.constructor != mtDropDownItem ? " top" : "");
for (var i = 0, item = null; item = this.items[i]; i++)
{
aHtml[i] = item.toString(childMenus[i]);
}
return str = '<div style="POSITION: absolute" id="' + id + '" class="' + sClassName + '">' +
'<div class="content"><table class="items" cellpadding="0" cellspacing="0" border="0">' +
'<tr><td colspan="2"><img src="' + mtDropDown.spacerGif + '" width="1" height="' + mtDropDown.menuPadding + '"></td></tr>' +
aHtml.join('') +
'<tr><td colspan="2"><img src="' + mtDropDown.spacerGif + '" width="1" height="' + mtDropDown.menuPadding + '"></td></tr></table>' +
'<div class="shadowBottom"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' +
'<div class="shadowRight"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' +
'<div class="background"><img src="' + mtDropDown.spacerGif + '" width="1" height="1"></div>' +
'</div></div>';
}
}
//mtDropDown 结束
mtDropDownSet.registry = [];
function mtDropDownSet(iDirection, iLeft, iTop, iReferencePoint)
{
this.addMenu = addMenu;
this.showMenu = showMenu;
this.hideMenu = hideMenu;
this.hide = hide;
var menus = [];
var _this = this;
var current = null;
this.index = mtDropDownSet.registry.length;
mtDropDownSet.registry[this.index] = this;
function addMenu(oActuator)
{
var m = new mtDropDown(oActuator, iDirection, iLeft, iTop, iReferencePoint, this);
menus[menus.length] = m;
return m;
}
function showMenu(oMenu)
{
if (oMenu != current)
{
if (current != null) hide(current);
current = oMenu;
oMenu.show();
}
else
{
cancelHide(oMenu);
}
}
function hideMenu(oMenu)
{
if (current == oMenu && oMenu.isOpen)
{
if (!oMenu.hideTimer) scheduleHide(oMenu);
}
}
function scheduleHide(oMenu)
{
oMenu.onqueue();
oMenu.hideTimer = window.setTimeout("mtDropDownSet.registry[" + _this.index + "].hide(mtDropDown.registry[" + oMenu.index + "])", mtDropDown.hideDelay);
}
function cancelHide(oMenu)
{
if (oMenu.hideTimer)
{
window.clearTimeout(oMenu.hideTimer);
oMenu.hideTimer = null;
}
}
function hide(oMenu)
{
if (!oMenu && current) oMenu = current;
if (oMenu && current == oMenu && oMenu.isOpen)
{
cancelHide(oMenu);
current = null;
oMenu.hideTimer = null;
oMenu.hide();
}
}
}
//mtDropDownSet 结束
function mtDropDownItem(sText, sUrl, oParent,desc,wid)
{
this.toString = toString;
this.text = sText;
this.url = sUrl;
this.parentMenu = oParent;
function toString(bDingbat)
{
var sDingbat = bDingbat ? mtDropDown.dingbatOff : mtDropDown.spacerGif;
var iEdgePadding = mtDropDown.itemPadding + mtDropDown.menuPadding;
var sPaddingLeft = "padding:" + mtDropDown.itemPadding + "px; padding-left:" + iEdgePadding + "px;"
var sPaddingRight = "padding:" + mtDropDown.itemPadding + "px; padding-right:" + iEdgePadding + "px;"
return '<tr class="item"><td nowrap style="' + sPaddingLeft + '"'+
/***** 以下是 2005-07-31 添加的代码，用于附加每个 MenuItem 的说明 ****/
' onmouseover=\'drs("'+ desc +'",'+wid+');\' onmouseout="nd();"'+
/***** 以上是 2005-07-31 添加的代码 ****/
'>' + sText + '</td></tr>';
<!-- Text + '</td><td width="14" style="' + sPaddingRight + '">' + </td></tr>'; -->
}
}
function Accelimation(from, to, time, zip)
{
if (typeof zip == "undefined") zip = 0;
if (typeof unit == "undefined") unit = "px";
this.x0 = from;
this.x1 = to;
this.dt = time;
this.zip = -zip;
this.unit = unit;
this.timer = null;
this.onend = new Function();
this.onframe = new Function();
}
Accelimation.prototype.start = function()
{
this.t0 = new Date().getTime();
this.t1 = this.t0 + this.dt;
var dx = this.x1 - this.x0;
this.c1 = this.x0 + ((1 + this.zip) * dx / 3);
this.c2 = this.x0 + ((2 + this.zip) * dx / 3);
Accelimation._add(this);
}
Accelimation.prototype.stop = function()
{
Accelimation._remove(this);
}
Accelimation.prototype._paint = function(time)
{
if (time < this.t1)
{
var elapsed = time - this.t0;
this.onframe(Accelimation._getBezier(elapsed/this.dt,this.x0,this.x1,this.c1,this.c2));
}
else this._end();
}
Accelimation.prototype._end = function()
{
Accelimation._remove(this);
this.onframe(this.x1);
this.onend();
}
Accelimation._add = function(o)
{
var index = this.instances.length;
this.instances[index] = o;
if (this.instances.length == 1)
{
this.timerID = window.setInterval("Accelimation._paintAll()", this.targetRes);
}
}
Accelimation._remove = function(o)
{
for (var i = 0; i < this.instances.length; i++)
{
if (o == this.instances[i])
{
this.instances = this.instances.slice(0,i).concat( this.instances.slice(i+1) );
break;
}
}
if (this.instances.length == 0)
{
window.clearInterval(this.timerID);
this.timerID = null;
}
}
Accelimation._paintAll = function()
{
var now = new Date().getTime();
for (var i = 0; i < this.instances.length; i++)
{
this.instances[i]._paint(now);
}
}
Accelimation._B1 = function(t) { return t*t*t }
Accelimation._B2 = function(t) { return 3*t*t*(1-t) }
Accelimation._B3 = function(t) { return 3*t*(1-t)*(1-t) }
Accelimation._B4 = function(t) { return (1-t)*(1-t)*(1-t) }
Accelimation._getBezier = function(percent,startPos,endPos,control1,control2)
{
return endPos * this._B1(percent) + control2 * this._B2(percent) + control1 * this._B3(percent) + startPos * this._B4(percent);
}
Accelimation.instances = [];
Accelimation.targetRes = 10;
Accelimation.timerID = null;
//-->
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=447860
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用 Javascript 并结合 XML 制作滑动透明的菜单，且该菜单拥有跟随鼠标的注释
- 使用jQuery的animate方法制作滑动菜单
- 【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效
- 使用Javascript封装实现屏蔽鼠标右键系统键菜单，并绑定自定义的事件
- 使用纯JavaScript+CSS制作伸缩菜单
- javascript鼠标跟随运动3种效果（眼球效果，苹果菜单，方向跟随）
- Android_横向滑动菜单, HorizontalScrollView,Fragment,Viewpager结合使用 +pullToRefreshListView
- 如何使用JavaScript 结合XSLT转换XML文档
- 使用javascript中读取Xml文件做成的一个二级联动菜单
- 转载 - 不使用任何框架，教你制作网页滑动切换效果
- [原创]使用js+xml制作的IE和FF都支持的树型菜单(程序不到4k哦)
- Android_横向滑动菜单, HorizontalScrollView,Fragment,Viewpager结合使用
- asp结合javascript，xml，sqlserver制作的无刷新二级select
- 如何使用JavaScript 结合XSLT转换XML文档
- 多叉树结合JavaScript树形控件实现无限级树形菜单（一种构建多级有序树形结构JSON（或XML）数据源的方法）
- 使用javascript oop开发滑动（slide) 菜单控件
- 横向滑动菜单, HorizontalScrollView,fragment，Viewpager结合使用
- 多叉树结合JavaScript树形控件实现无限级树形菜单（一种构建多级有序树形结构JSON（或XML）数据源的方法）
- 使用javascript中读取Xml文件做成的一个二级联动菜单
- 滑动菜单方案6：使用PopupWindows实现透明的弹出菜单