极酷菜单.htm

JavaScript特效（新）这里有许多的JAVA特效.供学者参考

}
function getPageScrollX() {
if (JDWMinNS4)
return window.pageXOffset;
if (JDWMinIE4)
return document.body.scrollLeft;
return -1;
}
function getPageScrollY() {
if (JDWMinNS4)
return window.pageYOffset;
if (JDWMinIE4)
return document.body.scrollTop;
return -1;
}
// dhtml Funcs End.
// bug with IE 5.5.
var JDWITEMs = new Array();    // Used to track all navigation bars.
/*ITEM constructor.*/
function ITEM(text, link) {
this.text = text;    // Item text.
this.link = link;    // Link URL or JavaScript code.
}
/*ECSmenu constructor.*/
function ECSmenu(hdrWidth, menuWidth) {
this.hdrWidth  = hdrWidth;
this.width     = menuWidth;
this.height    = 0;
this.items = new Array();
// Define methods.
this.addItem = ECSmenuaddItem;
}
// ECSmenu methods.
function ECSmenuaddItem(item) {
this.items[this.items.length] = item;
}
// JDWITEM constructor.
function JDWITEM(width) {
this.x = 0;
this.y = 0;
this.width  = width;
this.height = 0;
this.align    = "left";
this.minWidth = 0;
this.inverted = false;
this.menus = new Array();
this.created = false;
// Set default sizes.
this.border    = 2;
this.padding   = 4;
this.separator = 1;
// Set default colors.
this.borderColor  = "#000000";
this.hdrFgColor   = "#000000";
this.hdrBgColor   = "#999999";
this.hdrHiFgColor = "#ffffff";
this.hdrHiBgColor = "#666666";
this.itmFgColor   = "#000000";
this.itmBgColor   = "#cccccc";
this.itmHiFgColor = "#ffffff";
this.itmHiBgColor = "#000080";
// Set default fonts.
this.hdrFontFamily = "Arial,Helvetica,sans-serif";
this.hdrFontStyle  = "plain";
this.hdrFontWeight = "bold";
this.hdrFontSize   = "10pt";
this.itmFontFamily = "MS Sans Serif,Arial,Helvetica,sans-serif";
this.itmFontStyle  = "plain";
this.itmFontWeight = "bold";
this.itmFontSize   = "8pt";
// Define methods.
this.setSizes    = JDWITEMSetSizes;
this.setColors   = JDWITEMSetColors;
this.setFonts    = JDWITEMSetFonts;
this.addNAVm     = JDWITEMaddNAVm;
this.create      = JDWITEMCreate;
this.hide        = JDWITEMHide;
this.show        = JDWITEMShow;
this.moveTo      = JDWITEMMoveTo;
this.moveBy      = JDWITEMMoveBy;
this.getzIndex   = JDWITEMGetzIndex;
this.setzIndex   = JDWITEMSetzIndex;
this.getWidth    = JDWITEMGetWidth;
this.getMinWidth = JDWITEMGetMinWidth;
this.getAlign    = JDWITEMGetAlign;
this.setAlign    = JDWITEMSetAlign;
this.resize      = JDWITEMResize;
this.invert      = JDWITEMInvert;
this.isInverted  = JDWITEMIsInverted;
// Add to the list.
this.index = JDWITEMs.length;
JDWITEMs[this.index] = this;
}
function JDWITEMSetSizes(border, padding, separator) {
if (!this.created) {
this.border = border;
this.padding = padding;
this.separator = separator;
   }
}
function JDWITEMSetColors(bdColor,
hdrFgColor, hdrBgColor, hdrHiFgColor, hdrHiBgColor,
itmFgColor, itmBgColor, itmHiFgColor, itmHiBgColor) {
if (!this.created) {
this.borderColor  = bdColor;
this.hdrFgColor   = hdrFgColor;
this.hdrBgColor   = hdrBgColor;
this.hdrHiFgColor = hdrHiFgColor;
this.hdrHiBgColor = hdrHiBgColor;
this.itmFgColor   = itmFgColor;
this.itmBgColor   = itmBgColor;
this.itmHiFgColor = itmHiFgColor;
this.itmHiBgColor = itmHiBgColor;
   }
}
function JDWITEMSetFonts(hdrFamily, hdrStyle, hdrWeight, hdrSize,
itmFamily, itmStyle, itmWeight, itmSize) {
if (!this.created) {
this.hdrFontFamily = hdrFamily;
this.hdrFontStyle  = hdrStyle;
this.hdrFontWeight = hdrWeight;
this.hdrFontSize   = hdrSize;
this.itmFontFamily = itmFamily;
this.itmFontStyle  = itmStyle;
this.itmFontWeight = itmWeight;
this.itmFontSize   = itmSize;
   }
}
function JDWITEMaddNAVm(menu) {
if (!this.created)
this.menus[this.menus.length] = menu;
}
function JDWITEMCreate() {
var str;
var i, j;
var norm, high, end;
var width, height;
var x, y;
var scrX, scrY;
if (this.created || (!JDWMinNS4 && !JDWMinIE4))
return;
// Build HTML for filler and header layers.
str = "";
// For IE4, need to scroll to end of page before inserting HTML.
if (JDWMinIE4 && !JDWMinIE5) {
scrX = getPageScrollX();
scrY = getPageScrollY();
window.scrollTo(getPageWidth(), getPageHeight());
}
if (JDWMinNS4)
str += '<layer name="JDWITEM' + this.index + '_filler"></layer>\n'
+  '<layer name="JDWITEM' + this.index + '_hdrsBase">\n';
if (JDWMinIE4)
str += '<div id="JDWITEM' + this.index + '_filler"'
+  ' style="position:absolute;">'
+  '</div>\n'
+  '<div id="JDWITEM' + this.index + '_hdrsBase"'
+  ' style="position:absolute;">\n';
// Build HTML for the headers.
for (i = 0; i < this.menus.length; i++) {
norm = '<table border=0 cellpadding=' + this.padding
+ ' cellspacing=0'
+ (this.menus[i].hdrWidth > 0 ? ' width=' + this.menus[i].hdrWidth : '')
+ ((JDWMinIE4 && !JDWMinIE5) ? ' id="JDWITEM' + this.index + '_tbl' + i + '"': '')
+ '><tr><td'
+ (this.menus[i].hdrWidth == 0 ? ' nowrap=1' + this.menus[i].hdrWidth : '')
+ '>'
+ '<span style="color:' + this.hdrFgColor + ';'
+ 'font-family:' + this.hdrFontFamily + ';'
+ 'font-size:' + this.hdrFontSize + ';'
+ 'font-style:' + this.hdrFontStyle + ';'
+ 'font-weight:' + this.hdrFontWeight + ';">';
high = '<table border=0 cellpadding=' + this.padding
+ ' cellspacing=0'
+ (this.menus[i].hdrWidth > 0 ? ' width=' + this.menus[i].hdrWidth : '')
+ '><tr><td'
+ (this.menus[i].hdrWidth == 0 ? ' nowrap=1' + this.menus[i].hdrWidth : '')
+ '>'
+ '<span style="color:' + this.hdrHiFgColor + ';'
+ 'font-family:' + this.hdrFontFamily + ';'
+ 'font-size:' + this.hdrFontSize + ';'
+ 'font-style:' + this.hdrFontStyle + ';'
+ 'font-weight:' + this.hdrFontWeight + ';">';
end  = '</span></td></tr></table>';
if (JDWMinNS4)
str += '<layer name="JDWITEM' + this.index + '_head' + i + '">'
+  norm + this.menus[i].items[0].text + end
+  '</layer>\n'
+  '<layer name="JDWITEM' + this.index + '_headHigh' + i + '">'
+  high + this.menus[i].items[0].text + end
+  '</layer>\n'
+  '<layer name="JDWITEM' + this.index + '_headDummy' + i + '">'
+  '</layer>\n';
if (JDWMinIE4) {
str += '<div id="JDWITEM' + this.index + '_head' + i + '"'
+  ' style="position:absolute;">'
+  norm + this.menus[i].items[0].text + end
+  '</div>\n'
+  '<div id="JDWITEM' + this.index + '_headHigh' + i + '"'
+  ' style="position:absolute;">'
+  high + this.menus[i].items[0].text + end
+  '</div>\n'
+  '<div id="JDWITEM' + this.index + '_headDummy' + i + '"'
+  ' style="position:absolute;">';
if (JDWMinIE55)
str += '<table cellspacing=0 width="100%" height="100%"><tr><td> </td></tr></table>';
str += '</div>\n';
   }
}
if (JDWMinNS4) {
str += '</layer>\n';
this.baseLayer = new Layer(this.width);
this.baseLayer.document.open();
this.baseLayer.document.write(str);
this.baseLayer.document.close();
}
if (JDWMinIE4) {
str += '</div>\n';
str = '<div id="JDWITEM' + this.index + '"'
+ ' style="position:absolute;left:0px;top:0px;">\n'
+ str
+ '</div>\n';
document.body.insertAdjacentHTML("beforeEnd", str);
this.baseLayer = getLayer("JDWITEM" + this.index);
}
// Position and G6JDWinitialize each header.
width = 0;
height = 0;
for (i = 0; i < this.menus.length; i++) {
this.menus[i].hdrNormLayer = getLayer('JDWITEM' + this.index + '_head' + i);
this.menus[i].hdrHighLayer = getLayer('JDWITEM' + this.index + '_headHigh' + i);
this.menus[i].hdrDmmyLayer = getLayer('JDWITEM' + this.index + '_headDummy' + i);
height = Math.max(height, getHeight(this.menus[i].hdrNormLayer));
this.height = height + 2 * this.border;
// Fix for IE4 to resize headers to fit text width.
if (JDWMinIE4 && !JDWMinIE5) {
width = this.menus[i].hdrWidth;
if (width == 0)
width = eval('document.all.JDWITEM' + this.index + '_tbl' + i + '.clientWidth');
JDWITEMIEResizeLayer(this.menus[i].hdrNormLayer, width, height);
JDWITEMIEResizeLayer(this.menus[i].hdrHighLayer, width, height);
JDWITEMIEResizeLayer(this.menus[i].hdrDmmyLayer, width, height);
   }
}
x = this.border;
y = this.border;
for (i = 0; i < this.menus.length; i++) {
width = Math.max(this.menus[i].hdrWidth, getWidth(this.menus[i].hdrNormLayer));
if (this.menus[i].width == 0)
this.menus[i].width = width + 2 * this.border;
moveLayerTo(this.menus[i].hdrNormLayer, x, y);
setBgColor(this.menus[i].hdrNormLayer, this.hdrBgColor);
clipLayer(this.menus[i].hdrNormLayer, 0, 0, width, height);
inheritLayer(this.menus[i].hdrNormLayer);
moveLayerTo(this.menus[i].hdrHighLayer, x, y);
setBgColor(this.menus[i].hdrHighLayer, this.hdrHiBgColor);
clipLayer(this.menus[i].hdrHighLayer, 0, 0, width, height);
hideLayer(this.menus[i].hdrHighLayer);
moveLayerTo(this.menus[i].hdrDmmyLayer, x, y);
if (JDWMinIE4)
JDWITEMIEResizeLayer(this.menus[i].hdrDmmyLayer, width, height);
clipLayer(this.menus[i].hdrDmmyLayer, 0, 0, width, height);
inheritLayer(this.menus[i].hdrDmmyLayer);
this.menus[i].hdrDmmyLayer.highLayer = this.menus[i].hdrHighLayer;
this.menus[i].hdrLeft = x;
x += width + this.border;
this.menus[i].hdrRight = x;
}
// Save resulting width of headers and total width.
this.minWidth = x;
this.width = Math.max(this.minWidth, this.width);
// Position and G6JDWinitialize base, filler and headers base layers.
moveLayerTo(this.baseLayer, this.x, this.y);
setBgColor(this.baseLayer, this.borderColor);
if (JDWMinIE4)
JDWITEMIEResizeLayer(this.baseLayer, this.width, this.height);
clipLayer(this.baseLayer, 0, 0, this.width, this.height);
this.fillerLayer = getLayer('JDWITEM' + this.index + '_filler');
moveLayerTo(this.fillerLayer, this.border, this.border);
setBgColor(this.fillerLayer, this.hdrBgColor);
width = this.width - 2 * this.border;
height = this.height - 2 * this.border;
if (JDWMinIE4)
JDWITEMIEResizeLayer(this.fillerLayer, width, height);
clipLayer(this.fillerLayer, 0, 0, width, height);
inheritLayer(this.fillerLayer);
this.hdrsBaseLayer = getLayer('JDWITEM' + this.index + '_hdrsBase');
if (this.align == "left")
this.hdrsOffsetX = 0;
else if (this.align == "center")
this.hdrsOffsetX = Math.round((this.width - this.minWidth) / 2);
else if (this.align == "right")
this.hdrsOffsetX = this.width - this.minWidth;
else
this.hdrsOffsetX = Math.min(parseInt(this.align, 10), this.width - this.minWidth);
moveLayerTo(this.hdrsBaseLayer, this.hdrsOffsetX, 0);
setBgColor(this.hdrsBaseLayer, this.borderColor);
if (JDWMinIE4)
JDWITEMIEResizeLayer(this.hdrsBaseLayer, this.minWidth, this.height);
clipLayer(this.hdrsBaseLayer, 0, 0, this.minWidth, this.height);
inheritLayer(this.hdrsBaseLayer);
// Set up event handling and positioning for headers.
for (i = 0; i < this.menus.length; i++) {
this.menus[i].hdrDmmyLayer.index = this.index;
this.menus[i].hdrDmmyLayer.offsetX = this.menus[i].hdrLeft - this.border;
if (this.menus[i].hdrDmmyLayer.offsetX + this.menus[i].width > this.width)
this.menus[i].hdrDmmyLayer.offsetX = this.menus[i].hdrRight - this.menus[i].width;
this.menus[i].hdrDmmyLayer.offsetY = this.height - this.border;
this.menus[i].hdrDmmyLayer.onmouseover = JDWITEMHeaderOn;
this.menus[i].hdrDmmyLayer.onmouseout = JDWITEMHeaderOff;
if (JDWMinNS4) {
this.menus[i].hdrDmmyLayer.document.highLayer = this.menus[i].hdrHighLayer;
this.menus[i].hdrDmmyLayer.document.link = this.menus[i].items[0].link;
this.menus[i].hdrDmmyLayer.document.captureEvents(Event.MOUSEUP);
this.menus[i].hdrDmmyLayer.document.onmouseup = JDWITEMItemClick;
}
if (JDWMinIE4) {
this.menus[i].hdrDmmyLayer.highLayer = this.menus[i].hdrHighLayer;
this.menus[i].hdrDmmyLayer.link = this.menus[i].items[0].link;
this.menus[i].hdrDmmyLayer.onclick = JDWITEMItemClick;
   }
}
// Build the drop down menus.
norm = '<table border=0 cellpadding=' + this.padding
+ ' cellspacing=0 width="100%"><tr><td>'
+ '<span style="color:' + this.itmFgColor + ';'
+ 'font-family:' + this.itmFontFamily + ';'
+ 'font-size:' + this.itmFontSize + ';'
+ 'font-style:' + this.itmFontStyle + ';'
+ 'font-weight:' + this.itmFontWeight + ';">';
high = '<table border=0 cellpadding=' + this.padding
+ ' cellspacing=0 width="100%"><tr><td>'
+ '<span style="color:' + this.itmHiFgColor + ';'
+ 'font-family:' + this.itmFontFamily + ';'
+ 'font-size:' + this.itmFontSize + ';'
+ 'font-style:' + this.itmFontStyle + ';'
+ 'font-weight:' + this.itmFontWeight + ';">';
end  = '</span></td></tr></table>';
for (i = 0; i < this.menus.length; i++) {
width = this.menus[i].width - 2 * this.border;
str = "";
for (j = 1; j < this.menus[i].items.length; j++) {
if (JDWMinNS4)
str += '<layer name="JDWITEM' + this.index + '_menu' + i + '_norm' + j + '"'
+  ' width=' + width + '>'
+  norm + this.menus[i].items[j].text + end
+  '</layer>\n'
+  '<layer name="JDWITEM' + this.index + '_menu' + i + '_high' + j + '"'
+  ' width=' + width + '>'
+  high + this.menus[i].items[j].text + end
+  '</layer>\n'
+  '<layer name="JDWITEM' + this.index + '_menu' + i + '_dmmy' + j + '"'
+  ' width=' + width + '>'
+  '</layer>\n';
if (JDWMinIE4) {
str += '<div id="JDWITEM' + this.index + '_menu' + i + '_norm' + j + '"'
+  ' style="position:absolute;width:' + width + 'px;">'
+  norm + this.menus[i].items[j].text + end
+  '</div>\n'
+  '<div id="JDWITEM' + this.index + '_menu' + i + '_high' + j + '"'
+  ' style="position:absolute;width:' + width + 'px;">'
+  high + this.menus[i].items[j].text + end
+  '</div>\n'
+  '<div id="JDWITEM' + this.index + '_menu' + i + '_dmmy' + j + '"'
+  ' style="position:absolute;width:' + width + 'px;">';
if (JDWMinIE55)
str += '<table cellspacing=0 width="100%" height="100%"><tr><td> </td></tr></table>';
str += '</div>\n';
   }
}
if (JDWMinNS4) {
this.menus[i].baseLayer = new Layer(this.menus[i].width);
this.menus[i].baseLayer.document.open();
this.menus[i].baseLayer.document.write(str);
this.menus[i].baseLayer.document.close();
}
if (JDWMinIE4) {
str = '<div id="JDWITEM' + this.index + '_menu' + i + '"'
+ ' style="position:absolute;left:0px; top:0px;'
+ 'width:' + this.menus[i].width + 'px;visibility:hidden;">\n'
+ str
+ '</div>\n';
document.body.insertAdjacentHTML("beforeEnd", str);
this.menus[i].baseLayer = getLayer("JDWITEM" + this.index + "_menu" + i);
   }
}
// Restore original scroll position in IE4.
if (JDWMinIE4 && !JDWMinIE5)
window.scrollTo(x, y);
// Position and G6JDWinitialize each menu.
for (i = 0; i < this.menus.length; i++) {