我很纠结.......... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> <style type="text/css"> #ss,#sss{ width:430px; height:28px; background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_1254192730G9x9.gif); font-size:13px; color:#FFFFFF; } .c{ width:140px; height:auto; border:1px solid #9C9A9C; position:absolute; background-color:#FFFFFF; background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923146wVz.gif); background-repeat:repeat-y; padding:2px; z-index:10; } .hr{ display:block; overflow:hidden; height:1px; width:110px; background-color:#666666; margin:2px; margin-left:26px; } #ss div,#sss div{ color:#FFFFFF; height:28px; width:80px; float:left; line-height:28px; vertical-align:middle; text-align:center; } #ss div.title,#sss div.title{ color:#1f3a87; } #ss div img,#sss div img{ vertical-align:text-bottom; border:0px; margin-right:5px; padding-top:6px; } .l{ display:block; height:26px; width:99%; color:#1f3a87; font-size:12px; line-height:26px; vertical-align:middle; margin:0 auto; } .disabled{ color:#999999; } .list{ *background-color:#FFFFFF; border:1px solid transparent; *border-color:white; filter:chroma(color=white); } .bg{ *background-color:#FFFFFF; border:1px solid transparent; *border-color:white; filter:chroma(color=white); background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132yyW.gif); background-repeat:no-repeat; background-position: 110px 4px; } .bg img,.list img,.disabled img{ vertical-align:text-bottom; border:0px; margin-right:10px; padding-top:4px; } .listover{ border:1px solid #ADCFF7; background-color:#EFF3FF; } .bgover{ border:1px solid #ADCFF7; background-color:#EFF3FF; background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132yyW.gif); background-repeat:no-repeat; background-position: 110px 4px; } .bgover img, .listover img{ vertical-align:text-bottom; border:0px; margin-right:10px; padding-top:4px; } </style> </head> <body style=" padding:30px; margin:0px;"> <div id='ss'> <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282xH46.gif'>人族</div> <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282ddCJ.gif'>兽族</div> <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282DoV1.gif'>不死族</div> <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282xH46.gif'>精灵族</div> </div> <br><br><br><br> <div style="float:right">自动判断方向: <div id='sss'> <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282xH46.gif'>人族</div> <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282ddCJ.gif'>兽族</div> <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282DoV1.gif'>不死族</div> <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282xH46.gif'>精灵族</div> </div> </div> <br><br><br> <style type="text/css"> #tt{ height:auto; width:144px; border:1px solid #9C9A9C; } #tt div{ height:25px; width:135px; margin:2px; font-size:12px; line-height:25px; vertical-align:middle; padding-left:5px; background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132KUt.png); } #tt div.title{ background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923138NPD.png); color:#FFFFFF; } .tc{ width:144px; height:auto; border:1px solid #9C9A9C; position:absolute; background-color:#FFFFFF; z-index:10; } .tl{ display:block; height:25px; width:135px; font-size:12px; line-height:25px; vertical-align:middle; margin:0 auto; margin-top:2px; margin-bottom:2px; padding-left:5px; } .tlist{ color:#000000; background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_1254192313Jzrd.png); } .tlistover{ background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_1254192314VvN6.png); color:#FFFFFF; } .tbg{ color:#000000; background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132KUt.png); } .tbgover{ background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923138NPD.png); color:#FFFFFF; } </style> <div id='tt'> <div>人族</div> <div>兽族</div> <div>不死族</div> <div>精灵族</div> </div> <br><br><br><br><br><br><br> 右键菜单::: <br> <style type="text/css"> #yy{ height:300px; width:750px; border:1px solid #FF0000; } #right{ width:144px; height:auto; border: 1px solid #999999; display:none; position:absolute; background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923146wVz.gif); background-color:#FFFFFF; background-repeat:repeat-y; } #right div{ font-size:12px; height:28px; width:135px; line-height:28px; vertical-align:middle; padding-left:5px; color:#1f3a87; *background-color:#FFFFFF; border:1px solid transparent; *border-color:white; filter:chroma(color=white); margin:0 auto; margin-top:2px; margin-bottom:2px; } #right div img{ vertical-align:text-bottom; border:0px; margin-right:5px; padding-top:6px; } #right div.title{ border:1px solid #ADCFF7; background-color:#EFF3FF; } </style> <div id='yy'> </div> <div id='right'> <div><img src="http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282ddCJ.gif">人族</div> <div><img src="http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282DoV1.gif">兽族</div> <div><img src="http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282xH46.gif">不死族</div> <div><img src="http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282ddCJ.gif">精灵族</div> </div> <script language="javascript"> document.all&&document.execCommand("BackgroundImageCache", false, true); var Sys = { IE : navigator.userAgent.toLowerCase().match(/msie ([/d.]+)/), Firefox : navigator.userAgent.toLowerCase().match(/firefox//([/d.]+)/), Chrome : navigator.userAgent.toLowerCase().match(/chrome//([/d.]+)/), IE6 : navigator.userAgent.toLowerCase().match(/msie ([/d.]+)/) && ([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 6) } function $(Id){return document.getElementById(Id)}; function $$(p,e){return p.getElementsByTagName(e)}; function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)}; function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)}; function create(elm,parent,fn){var element = document.createElement(elm);parent.appendChild(element);if(fn)fn(element);return element}; function getTarget(e){return e.srcElement||e.target;}; function getNext(e){ return e.relatedTarget||e.toElement;}; function getobjpos(el,left){ var val = 0; while (el !=null) { val += el["offset" + (left? "Left": "Top")]; el = el.offsetParent; } return val; }; function fixEvent(event) { if (event) return event; //从cloudgamer中的代码中看到的 觉得停好 就拿来用了 //event = ((this.ownerDocument || this.document || this).parentWindow || window).event; //var scrolldoc = isChrome || isSafari ? document.body : document.documentElement; event = window.event; event.pageX = event.clientX + document.documentElement.scrollLeft; event.pageY = event.clientY + document.documentElement.scrollTop; event.target = event.srcElement; event.stopPropagation = fixEvent.stopPropagation; event.preventDefault = fixEvent.preventDefault; if(event.type == "mouseout") { event.relatedTarget = event.toElement; }else if(event.type == "mouseover") { event.relatedTarget = event.fromElement; } return event; }; fixEvent.preventDefault = function() { this.returnValue = false; }; fixEvent.stopPropagation = function() { this.cancelBubble = true; }; var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);}; var Bind = function(object, fun,args) { return function() { return fun.apply(object,args||[]); } } var BindAsEventListener = function(object, fun,arg) { return function(event) { return fun.apply(object, [(event || window.event)].concat(arg||[])); } }; var Extend = function() { var args = arguments; if(!args[1])args = [this,args[0]]; for(var property in args[1])args[0][property] = args[1][property]; return args[0]; }; var Class = function(properties){ var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; _class.prototype = properties; return _class; }; var Menu = new Class({ options:{ h_style : "title", c_style : "c", //列表容器样式 l_style : "l list", //列表样式 l_style1 : "l listover", //鼠标放上去后的列表样式 l_bg_style : "l bg", //有子菜单时候的背景 l_bg_style1 : "l bgover", //有子菜单时鼠标放上去的样式 l_disabled : "l disabled", //设置不能选中时的样式 l_hr : "hr", //分行符的样式 direction : "X" }, initialize : function(container,data,elm,options){ this.container = container; //设置容器 this.data = data; //数据 this.elm = elm; //设置list是什么元素 可以是div 也可以是a 也可以是其他 this.stack = []; //元素堆栈 看哪些元素已经存在了 this.obj = null; //记录哪一项被选种过 this.lists = []; //为查找元素而记录元素 Extend(this.options,options||{}); Extend(this,this.options); var elm = this.container.getElementsByTagName(this.elm); for(var i=0,l=elm.length;i<l;i++) { if(this.data[i].txt == i) { addListener(elm[i],'mouseover',BindAsEventListener(this,this.Title,[this.data[i],elm[i]])); addListener(elm[i],'mouseout',BindAsEventListener(this,this.Hide)); } } }, Title : function(e,d,obj){ this.obj = obj; obj.className = this.h_style; if(!d.menu)return; var container = this.Makebody(d,obj); if(this.direction=="X") { container.style.left = getobjpos(obj,1) + "px"; container.style.top = obj.offsetHeight + getobjpos(obj,0) + "px"; } else { container.style.left = getobjpos(obj,1)+obj.offsetWidth + "px" container.style.top = getobjpos(obj,0) + "px"; } }, Makemenu : function(e,d,obj){ this.mouseover(obj); if(!d.menu)return; var container = this.Makebody(d,obj); container.style.left = this.pos(obj,container,"X")?(getobjpos(obj,1)+ obj.offsetWidth+ "px"):(getobjpos(obj,1) - container.offsetWidth + 2 + "px"); container.style.top = this.pos(obj,container,"Y")?(getobjpos(obj,0) + "px"):(getobjpos(obj,0) - container.offsetHeight+2+20+"px"); }, Makebody : function(d,obj){ if(!obj.getAttribute('container')){ var _self = this; var container = create('div',document.body,function(o){o.className = _self.c_style;}); container.onmouseup = function(e){fixEvent(e).stopPropagation();fixEvent(e).preventDefault();} } else { var container = this.lists[parseInt(obj.getAttribute('container'))-1]; container.style.display = "block"; this.resetstyle(container,d); } this.stack.push(container); if(!obj.getAttribute('container')) { addListener(container,"mouseout",BindAsEventListener(this,this.Hide)); this.lists.push(container) obj.setAttribute("container",this.lists.length); var Item = null, _self = this; for(var i = 0,l = d.menu.length;i<l;i++) { (function(i){Item = create("div",container,function(o){ if(d.menu[i].ico){o.innerHTML = "<img src = '"+d.menu[i].ico+"'>";} with(o){innerHTML = innerHTML+d.menu[i].txt; setAttribute("menu",d.menu[i].menu?"true":"false"); className = d.menu[i].menu?_self.l_bg_style:_self.l_style; } })})(i); if(d.menu[i].group)create("span",container,function(o){o.className = _self.l_hr}); if(!d.menu[i].exist){Item.className = _self.l_disabled;continue;}; addListener(Item,"mouseover",BindAsEventListener(this,this.Makemenu,[d.menu[i],Item])); addListener(Item,"mouseout",BindAsEventListener(this,this.Hide,[Item])); Item.oncontextmenu = function(e){fixEvent(e).stopPropagation();fixEvent(e).preventDefault();} Item.onmouseup = function(e){fixEvent(e).stopPropagation();fixEvent(e).preventDefault();} } } else { this.lists[parseInt(obj.getAttribute('container'))-1].style.display = "block"; } return container; }, Hide : function(e,o){ o&&this.contains(o.parentNode,getNext(e))&&this.mouseout(e,o); var exist = false; for(var index = 0,l = this.stack.length;index<l;index++) { if(this.contains(this.stack[index],getNext(e))){exist = true;break;} }; if(exist) { for(var i = index + 1;i<this.stack.length;i++) {this.stack[i].style.display = "none";} this.stack.length = index + 1; } else { for(var i = 0;i<this.stack.length;i++) {this.stack[i].style.display = "none";} this.stack.length = 0; } if(this.stack.length == 0)this.obj.className = ""; }, mouseover : function(obj){ for(var i=0,l=$$(obj.parentNode,this.elm).length;i<l;i++) { if($$(obj.parentNode,this.elm)[i].className ==this.l_disabled)continue; $$(obj.parentNode,this.elm)[i].className = $$(obj.parentNode,this.elm)[i].getAttribute("menu")=="true"?this.l_bg_style:this.l_style; } if(obj.className == this.l_disabled)return; obj.className = obj.getAttribute("menu")=="true"?this.l_bg_style1:this.l_style1 }, mouseout : function(e,obj){ if(obj.className == this.l_disabled)return; obj.className = obj.getAttribute("menu")=="true"?this.l_bg_style:this.l_style; }, contains: function(parent,child){ if(!parent||!child)return false; if(parent == child) return true; return Sys.IE?parent.contains(child):(parent.compareDocumentPosition(child)==20)?true:false; return false; }, Bubble : function(e){ fixEvent(e).stopPropagation(); }, Stopdefault : function(e){ fixEvent(e).preventDefault(); }, pos : function(o,w,arg){ //判断位置的计算方式 if(arg=="X") { var xx = Sys.Chrome?document.body.clientWidth:document.documentElement.clientWidth; return (xx -getobjpos(o,1)-o.offsetWidth-5)>w.offsetWidth; } else { var xx = Sys.Chrome?document.body:document.documentElement; return (xx.clientHeight -getobjpos(o,0)+xx.scrollTop+o.offsetHeight-5)>w.offsetHeight; } }, resetstyle : function(c,d){ for(var i=0,l=$$(c,this.elm).length;i<l;i++) { $$(c,this.elm)[i].className = this.l_style; if(d.menu[i].menu)$$(c,this.elm)[i].className = this.l_bg_style; if(!d.menu[i].exist)$$(c,this.elm)[i].className = this.l_disabled; } } }); var bg = null; var img = ["http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282xH46.gif","http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282ddCJ.gif","http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282DoV1.gif"] window.onload = function(){ var data = [ {txt:0,menu:[ {ico:img[0],group:true,exist:true,txt:"大法师",menu:[ {ico:img[1],group:false,exist:true,txt:"召唤水元素",menu:[ {ico:img[2],group:false,exist:true,txt:"穿刺攻击"},{ico:img[0],group:false,exist:true,txt:"很强肉盾"},{ico:img[1],group:false,exist:true,txt:"对空对第"} ]},{ico:img[2],group:false,exist:true,txt:"强大暴风雪"},{ico:img[0],group:false,exist:true,txt:"辉煌光环"},{ico:img[1],group:false,exist:true,txt:"群体瞬间移动"} ]}, {ico:img[2],group:false,exist:true,txt:"山丘之王",menu:[ {ico:img[0],group:false,exist:true,txt:"风暴之锤"},{ico:img[1],group:false,exist:true,txt:"大铁锤敲地"},{ico:img[2],group:false,exist:true,txt:"35%几率锥晕"},{ico:img[0],group:false,exist:true,txt:"超级天神下凡"} ]}, {ico:img[1],group:false,exist:true,txt:"圣骑士",menu:[ {ico:img[2],group:false,exist:true,txt:"一束大光线"},{ico:img[0],group:false,exist:true,txt:"无敌就是无敌"},{ico:img[1],group:false,exist:true,txt:"专注光环啊"},{ico:img[2],group:false,exist:true,txt:"复活6个单位"} ]}, {ico:img[0],group:false,exist:true,txt:"血法师",menu:[ {ico:img[1],group:false,exist:true,txt:"一个燃烧蛋"},{ico:img[2],group:false,exist:true,txt:"吸蓝啊"},{ico:img[0],group:false,exist:true,txt:"虚无魔法加成"},{ico:img[1],group:false,exist:true,txt:"神鸟凤凰"} ]} ]}, {txt:1,menu:[ {ico:img[2],group:false,exist:false,txt:"剑圣"}, {ico:img[0],group:false,exist:false,txt:"先知"}, {ico:img[1],group:false,exist:true,txt:"牛头人酋长"}, {ico:img[2],group:false,exist:true,txt:"小YY"} ]}, {txt:2,menu:[ {ico:img[1],group:false,exist:true,txt:"死亡骑士"}, {ico:img[0],group:false,exist:true,txt:"巫妖"}, {ico:img[2],group:false,exist:false,txt:"恐惧魔王"}, {ico:img[1],group:false,exist:false,txt:"小强王子"} ]}, {txt:3,menu:[ {ico:img[1],group:false,exist:true,txt:"丛林守护者"}, {ico:img[0],group:false,exist:true,txt:"女祭祀(虎MM)"}, {ico:img[2],group:false,exist:true,txt:"守望者(SM女王)"}, {ico:img[1],group:false,exist:true,txt:"恶魔猎手",menu:[{ico:img[0],group:false,exist:true,txt:"燃烧法力"}, {ico:img[2],group:false,exist:true,txt:"禁祭火焰羽衣"}, {ico:img[1],group:false,exist:true,txt:"一定的几率躲避"}, {ico:img[0],group:false,exist:true,txt:"变身强大恶魔",menu:[{ico:img[0],group:false,exist:true,txt:"远程攻击"},{ico:img[0],group:false,exist:true,txt:"多500点血"},{ico:img[0],group:false,exist:true,txt:"变的高大帅气"},{ico:img[0],group:false,exist:true,txt:"混乱攻击模式",menu:[{ico:img[0],group:false,exist:true,txt:"无视对方防御"},{ico:img[0],group:false,exist:true,txt:"无视各种护甲"}]}]}]} ]}, ]; var data1 = [ {exist:true,txt:0,menu:[ {exist:true,txt:"大法师",menu:[ {exist:true,txt:"召唤水元素",menu:[ {exist:true,txt:"穿刺攻击"},{exist:true,txt:"很强肉盾"},{exist:true,txt:"对空对第"} ]},{exist:true,txt:"强大暴风雪"},{exist:true,txt:"辉煌光环"},{exist:true,txt:"群体瞬间移动"} ]}, {exist:true,txt:"山丘之王",menu:[ {exist:true,txt:"风暴之锤"},{exist:true,txt:"大铁锤敲地"},{exist:true,txt:"35%几率锥晕"},{exist:true,txt:"超级天神下凡"} ]}, {exist:true,txt:"圣骑士",menu:[ {exist:true,txt:"水元素"},{exist:true,txt:"暴风雪"},{exist:true,txt:"辉煌光环"},{exist:true,txt:"瞬间移动"} ]}, {exist:true,txt:"血法师",menu:[ {exist:true,txt:"水元素"},{exist:true,txt:"暴风雪"},{exist:true,txt:"辉煌光环"},{exist:true,txt:"瞬间移动"} ]} ]}, {exist:true,txt:1,menu:[ {exist:true,txt:"剑圣"}, {exist:true,txt:"先知"}, {exist:true,txt:"牛头人酋长"}, {exist:true,txt:"小YY"} ]}, {exist:true,txt:2,menu:[ {exist:true,txt:"死亡骑士"}, {exist:true,txt:"巫妖"}, {exist:true,txt:"恐惧魔王"}, {exist:true,txt:"小强王子"} ]}, {exist:true,txt:3,menu:[ {exist:true,txt:"恶魔猎手"}, {exist:true,txt:"丛林守护者"}, {exist:true,txt:"女祭祀(虎MM)"}, {exist:true,txt:"守望者(SM女王)"} ]}, ]; new Menu($('right'),data,"div",{direction:"Y"}); new Menu($('ss'),data,"div",{direction:"X"}); new Menu($('sss'),data,"div"); new Menu($('tt'),data1,"div",{direction:"Y",c_style:"tc",l_style:"tl tlist",l_style1:"tl tlistover",l_bg_style:"tl tbg",l_bg_style1 : "tl tbgover"}); /*=======================================================================================================================*/ $('yy').oncontextmenu = $('right').oncontextmenu = function(e){fixEvent(e).preventDefault();}; $('yy').onselectstart = $('right').onselectstart = function(){return false;}; $('yy').onmouseup = function(e){$('right').style.display = "none";var e = fixEvent(e);e.stopPropagation();show(e)}; document.onmouseup = function(){$('right').style.display = "none"}; function show(e){ if(e.button==1){$('right').style.display = "none";return;} if(e.button==2) { $('right').style.display = "block"; $('right').style.top = e.pageY + "px"; $('right').style.left = e.pageX + "px"; } } } </script> </body> </html> <script type="text/javascript"> </script>