日韩一级二级,久久综合色之久久综合,51社区在线成人免费视频

- 龍誠動態
  
  行業新聞
  
  我們的觀點
  
  公司公告
  
  建站技術
  
  網站SEO優化
  
  網站制作流程
  
  產品報價
  - 聯系電話：0577-55882408
  - 傳真號碼：0577-55882411
  - 聯系手機：15224122065
  - 聯系地址：溫州市甌海站南商貿城C幢306
- - 首頁-新聞中心-建站技術
  <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>幾款實用的下拉菜單，alixix整理收集。</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 class="yb7da51" 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 class="bnbui1p" 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 class="mu0k5t7" 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 class="tegpg0p" id='yy'> </div> <div class="0fjwpcl" 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>