JS超级酷的导航菜单代码
2011-05-05 11:03
453 查看
代码简介：
JS超级酷的导航菜单代码，类似WINDOWS风格的导航，又又立体效果，很不错的，赶快运行一下，一睹为快吧。
代码内容：
代码来自：http://www.webdm.cn/webcode/1aa50ca7-358e-4ef2-ae7d-ac56957e99a3.html
JS超级酷的导航菜单代码，类似WINDOWS风格的导航，又又立体效果，很不错的，赶快运行一下，一睹为快吧。
代码内容：
<HTML>
<HEAD>
<TITLE>JS超级酷的导航菜单代码_网页代码站(www.webdm.cn)</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<SCRIPT type=text/javascript>
var dragobject = null;
var tx;
var ty;
function getReal(el) {
temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
if ((temp.className == "moveme") || (temp.className == "handle")){
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}
function moveme_onmousedown() {
el = getReal(window.event.srcElement)
if (el.className == "moveme") {
dragobject = el;
ty = (window.event.clientY - dragobject.style.pixelTop);
tx = (window.event.clientX - dragobject.style.pixelLeft);
window.event.returnValue = false;
window.event.cancelBubble = true;
}
else if (el.className == "handle") {
tmp = el.getAttribute("for");
if (tmp != null) {
el = eval(tmp);
dragobject = el;
ty = (window.event.clientY - dragobject.style.pixelTop);
tx = (window.event.clientX - dragobject.style.pixelLeft);
window.event.returnValue = false;
window.event.cancelBubble = true;
}
else {
dragobject = null;
}
}
else {
dragobject = null;
}
}
function moveme_onmouseup() {
if(dragobject) {
dragobject = null;
}
}
function moveme_onmousemove() {
if (dragobject) {
if(window.event.clientX >= 0) {
dragobject.style.left = window.event.clientX - tx;
dragobject.style.top = window.event.clientY - ty;
}
window.event.returnValue = false;
window.event.cancelBubble = true;
}
}
if (document.all) { //This only works in IE4 or better
document.onmousedown = moveme_onmousedown;
document.onmouseup = moveme_onmouseup;
document.onmousemove = moveme_onmousemove;
}
document.write("<style>");
document.write(".moveme {cursor: move;}");
document.write(".handle {cursor: move;}");
document.write("</style>");
</SCRIPT>
<SCRIPT type=text/javascript>
document.onmouseover = doOver;
document.onmouseout = doOut;
document.onmousedown = doDown;
document.onmouseup = doUp;
function doOver() {
var toEl = getReal(window.event.toElement, "className", "coolButton");
var fromEl = getReal(window.event.fromElement, "className", "coolButton");
if (toEl == fromEl) return;
var el = toEl;
// alert(el);
// var cDisabled = el.getAttribute("cDisabled");
var cDisabled = el.cDisabled;
// alert(cDisabled);
cDisabled = (cDisabled != null); // If CDISABLED atribute is present
if (el.className == "coolButton")
el.onselectstart = new Function("return false");
if ((el.className == "coolButton") && !cDisabled) {
makeRaised(el);
makeGray(el,false);
}
}
function doOut() {
var toEl = getReal(window.event.toElement, "className", "coolButton");
var fromEl = getReal(window.event.fromElement, "className", "coolButton");
if (toEl == fromEl) return;
var el = fromEl;
// var cDisabled = el.getAttribute("cDisabled");
var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null); // If CDISABLED atribute is present
var cToggle = el.cToggle;
toggle_disabled = (cToggle != null); // If CTOGGLE atribute is present
if (cToggle && el.value) {
makePressed(el);
makeGray(el,true);
}
else if ((el.className == "coolButton") && !cDisabled) {
makeFlat(el);
makeGray(el,true);
}
}
function doDown() {
el = getReal(window.event.srcElement, "className", "coolButton");
var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null); // If CDISABLED atribute is present
if ((el.className == "coolButton") && !cDisabled) {
makePressed(el)
}
}
function doUp() {
el = getReal(window.event.srcElement, "className", "coolButton");
var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null); // If CDISABLED atribute is present
if ((el.className == "coolButton") && !cDisabled) {
makeRaised(el);
}
}
function getReal(el, type, value) {
temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
if (eval("temp." + type) == value) {
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}
function findChildren(el, type, value) {
var children = el.children;
var tmp = new Array();
var j=0;
for (var i=0; i<children.length; i++) {
if (eval("children[i]." + type + "==\"" + value + "\"")) {
tmp[tmp.length] = children[i];
}
tmp = tmp.concat(findChildren(children[i], type, value));
}
return tmp;
}
function disable(el) {
if (document.readyState != "complete") {
window.setTimeout("disable(" + el.id + ")", 100); // If document not finished rendered try later.
return;
}
var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null); // If CDISABLED atribute is present
if (!cDisabled) {
el.cDisabled = true;
el.innerHTML = '<span style="background: buttonshadow; width: 100%; height: 100%; text-align: center;">' +
'<span style="filter:Mask(Color=buttonface) DropShadow(Color=buttonhighlight, OffX=1, OffY=1, Positive=0); height: 100%; width: 100%%; text-align: center;">' +
el.innerHTML +
'</span>' +
'</span>';
if (el.onclick != null) {
el.cDisabled_onclick = el.onclick;
el.onclick = null;
}
}
}
function enable(el) {
var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null); // If CDISABLED atribute is present
if (cDisabled) {
el.cDisabled = null;
el.innerHTML = el.children[0].children[0].innerHTML;
if (el.cDisabled_onclick != null) {
el.onclick = el.cDisabled_onclick;
el.cDisabled_onclick = null;
}
}
}
function addToggle(el) {
var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null); // If CDISABLED atribute is present
var cToggle = el.cToggle;
cToggle = (cToggle != null); // If CTOGGLE atribute is present
if (!cToggle && !cDisabled) {
el.cToggle = true;
if (el.value == null)
el.value = 0; // Start as not pressed down
if (el.onclick != null)
el.cToggle_onclick = el.onclick; // Backup the onclick
else
el.cToggle_onclick = "";
el.onclick = new Function("toggle(" + el.id +"); " + el.id + ".cToggle_onclick();");
}
}
function removeToggle(el) {
var cDisabled = el.cDisabled;
cDisabled = (cDisabled != null); // If CDISABLED atribute is present
var cToggle = el.cToggle;
cToggle = (cToggle != null); // If CTOGGLE atribute is present
if (cToggle && !cDisabled) {
el.cToggle = null;
if (el.value) {
toggle(el);
}
makeFlat(el);
if (el.cToggle_onclick != null) {
el.onclick = el.cToggle_onclick;
el.cToggle_onclick = null;
}
}
}
function toggle(el) {
el.value = !el.value;
if (el.value)
el.style.background = "URL()";
else
el.style.backgroundImage = "";
// doOut(el);
}
function makeFlat(el) {
with (el.style) {
background = "";
border = "1px solid buttonface";
padding = "1px";
}
}
function makeRaised(el) {
with (el.style) {
borderLeft = "1px solid buttonhighlight";
borderRight = "1px solid buttonshadow";
borderTop = "1px solid buttonhighlight";
borderBottom = "1px solid buttonshadow";
padding = "1px";
}
}
function makePressed(el) {
with (el.style) {
borderLeft = "1px solid buttonshadow";
borderRight = "1px solid buttonhighlight";
borderTop = "1px solid buttonshadow";
borderBottom = "1px solid buttonhighlight";
paddingTop = "2px";
paddingLeft = "2px";
paddingBottom = "0px";
paddingRight = "0px";
}
}
function makeGray(el,b) {
var filtval;
if (b)
filtval = "gray()";
else
filtval = "";
var imgs = findChildren(el, "tagName", "IMG");
for (var i=0; i<imgs.length; i++) {
imgs[i].style.filter = filtval;
}
}
document.write("<style>");
document.write(".coolBar {background: buttonface;border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; padding: 2px; font: menu;}");
document.write(".coolButton {border: 1px solid buttonface; padding: 1px; text-align: center; cursor: default;}");
document.write(".coolButton IMG {filter: gray();}");
document.write("</style>");
</SCRIPT>
<SCRIPT type=text/javascript>
<!--
document.onmousedown = initDown;
document.onmouseup = initUp;
document.onmousemove = initMove;
function initDown() {
doDown();
moveme_onmousedown();
}
function initUp() {
doUp();
moveme_onmouseup();
}
function initMove() {
moveme_onmousemove();
}
//-->
</SCRIPT>
<STYLE type=text/css>BODY {
FONT-FAMILY: "宋体"; FONT-SIZE: 9pt; MARGIN-TOP: 0px
}
.pt9 {
FONT-FAMILY: "宋体"; FONT-SIZE: 9pt
}
</STYLE>
<META content="Microsoft FrontPage 4.0" name=GENERATOR>
</HEAD>
<BODY bgColor=#e0dfde leftMargin=0 topMargin=0>
<SCRIPT language=JavaScript>
var mylocation="index.htm"
var winheight=100
var winsize=100
var x=5
function go(){
win2=window.open("","","scrollbars")
win2.location=mylocation
if (!document.layers&&!document.all){
win2.location=mylocation
return}
win2.resizeTo(100,100)
win2.moveTo(0,0)
go2()}
function go2(){
if (winheight>=screen.availHeight-3)
x=0
win2.resizeBy(5,x)
winheight+=5
winsize+=5
if (winsize>=screen.width-5){
win2.location=mylocation
winheight=100
winsize=100
x=5
return}
setTimeout("go2()",50)
}
</SCRIPT>
<DIV align=left>
<TABLE cellPadding=0 class=coolBar id=toolbar1
style="LEFT: 0px; POSITION: relative; TOP: 0px; Z-INDEX: 99" width="100%">
<TBODY>
<TR>
<TD class=coolButton onclick=javascript:history.go(-1)><NOBR><IMG
height=16 src="http://www.webdm.cn/images/20091114/jian.gif" width=16>回上一步</NOBR></TD>
<TD class=coolButton
onclick="window.open('/', '_blank')"><NOBR><IMG
height=16 src="http://www.webdm.cn/images/20091114/home.gif" width=16>回到首页</NOBR></TD>
<TD class=coolButton
onclick="window.open('/', '_blank')"><NOBR><IMG
height=16 src="http://www.webdm.cn/images/20091114/search.gif" width=16>最新JS脚本</NOBR> </TD>
<TD class=coolButton
onclick="window.open('/', 'main')"><NOBR><IMG height=16
src="http://www.webdm.cn/images/20091114/win16.gif" width=16>JavaApplet</NOBR> </TD>
<TD class=coolButton
onclick="window.open('/', 'main')"><NOBR><IMG height=16
src="http://www.webdm.cn/images/20091114/read.gif" width=16>免费资源</NOBR></TD>
<TD class=coolButton
onclick="window.open('/', 'main')"><NOBR><IMG
height=16 src="http://www.webdm.cn/images/20091114/mail.gif" width=16>订阅本站邮件</NOBR> </TD>
<TD class=coolButton
onclick="window.open('/', '_blank')"><NOBR><IMG
height=16 src="http://www.webdm.cn/images/20091114/write.gif" width=16>本站留言板</NOBR> </TD>
<TD class=coolButton
onclick="window.open('/', 'main')"><NOBR><IMG height=16
src="http://www.webdm.cn/images/20091114/win16.gif" width=16>本站导航地图</NOBR> </TD>
<TD class=coolButton
onclick="window.open('/', '_blank')"><NOBR><IMG
height=16 src="http://www.webdm.cn/images/20091114/lt.gif" width=16>本站论坛</NOBR>
</TD></TR></TBODY></TABLE></DIV></BODY></HTML>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>代码来自：http://www.webdm.cn/webcode/1aa50ca7-358e-4ef2-ae7d-ac56957e99a3.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js实现横向伸展开的二级导航菜单代码
- js左侧三级菜单导航实例代码
- JS实现带圆弧背景渐变效果的导航菜单代码
- js左侧三级菜单导航实例代码
- 一个js控制的导航菜单实例代码
- AngularJS+Bootstrap3多级导航菜单的实现代码
- 来自X-Menu 动感导航菜单代码（JS实现）
- JS+CSS实现大气的黑色首页导航菜单效果代码
- js选择并转移导航菜单示例代码
- js二级导航菜单代码实例
- JS实现带圆弧背景渐变效果的导航菜单代码
- JS实现带有抽屉效果的产品类网站多级导航菜单代码
- JS实现带有抽屉效果的产品类网站多级导航菜单代码
- JS+CSS组合的精彩漂亮的导航菜单代码
- js实现改进的仿蓝色论坛导航菜单效果代码
- JS实现自动变化的导航菜单效果代码
- js实现的动画导航菜单效果代码
- JS防FLASH效果的导航菜单代码