跨幀結構無限級菜單_JQuery特效代碼

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 跨幀結構無限級菜單

跨幀結構無限級菜單

編輯：JQuery特效代碼

解釋地址
寫點東西不容易啊真的就這麼杯具了杯具啊

<!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"> 
body{margin:0px; padding:0px; font-size:12px;} 
*{margin:0; padding:0;} 
.de{ background-image:url(http://paui.52done.cn/demos/menu/images/nav_bg.gif);} 
#demo1{list-style:none; height:26px; cursor:pointer; background-image:url(http://paui.52done.cn/demos/menu/images/nav_bg.gif); color:#FFFFFF; margin-left:20px;} 
#demo1 li{float:left; height:25px; line-height:25px; padding:0 15px; margin-top:1px;} 
#demo1 li.focus{ color:#FE6100; background-color:#fcfcfc;} 
</style> 
</head> 
<body> 
<div class="de"> 
<ul id='demo1'> 
<li>人族</li> 
<li>獸族</li> 
<li>不死族</li> 
</ul> 
</div> 
<script type="text/javascript"> 
(function(window,undefined){ 
window.Sys = function (ua){ 
var b = { 
ie: /msie/.test(ua) && !/opera/.test(ua), 
opera: /opera/.test(ua), 
safari: /webkit/.test(ua) && !/chrome/.test(ua), 
firefox: /firefox/.test(ua), 
chrome: /chrome/.test(ua) 
},vMark = ""; 
for (var i in b) { 
if (b[i]) { vMark = "safari" == i ? "version" : i; break; } 
} 
b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0"; 
b.ie6 = b.ie && parseInt(b.version, 10) == 6; 
b.ie7 = b.ie && parseInt(b.version, 10) == 7; 
b.ie8 = b.ie && parseInt(b.version, 10) == 8; 
return b; 
}(window.navigator.userAgent.toLowerCase()); 
window.Sys.ie6&&document.execCommand("BackgroundImageCache", false, true); 
window.$ = function(Id){ 
return document.getElementById(Id); 
}; 
window.addListener = function(element,e,fn){ 
!element.events&&(element.events = {}); 
element.events[e]&&(element.events[e][addListener.guid++]=fn)||(element.events[e] = {'0':fn}); 
element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn); 
}; 
window.addListener.guid = 1; 
window.removeListener = function(element,e,fn){ 
var handlers = element.events[e],type; 
if(fn){ 
for(type in handlers) 
if(handlers[type]===fn){ 
element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn); 
delete handlers[type]; 
} 
}else{ 
for(type in handlers){ 
element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" + e,handlers[type]); 
delete handlers[type]; 
} 
} 
}; 
window.setStyle = function(elems, style, value){ 
if( !elems.length ) elems = [elems]; 
if( typeof style == "string"){ 
style = value === undefined?{cssText:style}:(function(o){ 
return (o[style] = value,o); 
})({}); 
}; 
each(elems,function(i,elem,style){ 
var value,name,ie=Sys.ie ; 
for(name in style){ 
value = style[name]; 
if (name === "opacity" && ie) { 
elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha$[^)]*$/, "" ) + "alpha(opacity=" + value * 100 + ")"; 
}else if(name === "float"){ 
elem.style[ ie ? "styleFloat" : "cssFloat" ] = value; 
}else{ 
name = name.replace(/-([a-z])/ig, function(all, letter){ 
return letter.toUpperCase(); 
}); 
elem.style[name] = value; 
} 
} 
},style); 
}; 
var slice = Array.prototype.slice; 
window.Bind = function(object, fun) { 
var args = slice.call(arguments).slice(2); 
return function() { 
return fun.apply(object, args); 
}; 
}; 
window.BindAsEventListener = function(object, fun,args) { 
var args = slice.call(arguments).slice(2); 
return function(event) { 
return fun.apply(object, [event || window.event].concat(args)); 
} 
}; 
//copy from jQ 
window.extend = function(){ 
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options; 
if ( typeof target === "boolean" ) { 
deep = target; 
target = arguments[1] || {}; 
i = 2; 
} 
if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]") 
target = {}; 
for(;i<length;i++){ 
if ( (options = arguments[ i ]) != null ) 
for(var name in options){ 
var src = target[ name ], copy = options[ name ]; 
if ( target === copy ) 
continue; 
if ( deep && copy && typeof copy === "object" && !copy.nodeType ){ 
target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy ); 
} 
else if(copy !== undefined) 
target[ name ] = copy; 
} 
} 
return target; 
}; 
//copy from jQ 
window.each = function ( object, callback, args ) { 
var name, i = 0, length = object.length; 
if ( args ) { 
args = Array.prototype.slice.call(arguments).slice(2); 
if ( length === undefined ) { 
for ( name in object ) 
if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) 
break; 
} else 
for ( ; i < length; i++) 
if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // 
break; 
} else { 
if ( length === undefined ) { 
for ( name in object ) 
if ( callback.call( object[ name ], name, object[ name ] ) === false ) 
break; 
} else 
for ( var value = object[0]; 
i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} 
} 
return object; 
}; 
window.currentStyle = function(element){ 
return element.currentStyle || document.defaultView.getComputedStyle(element, null); 
}; 
window.objPos = function(elem){ 
var left = 0, top = 0, right = 0, bottom = 0,doc = elem ? elem.ownerDocument : document; 
if ( !elem.getBoundingClientRect || window.Sys.ie8 ) { 
var n = elem; 
while (n) { left += n.offsetLeft, top += n.offsetTop; n = n.offsetParent; }; 
right = left + elem.offsetWidth; bottom = top + elem.offsetHeight; 
} else { 
var rect = elem.getBoundingClientRect(); 
left = right = doc.documentElement.scrollLeft || doc.body.scrollLeft; 
top = bottom = doc.documentElement.scrollLeft || doc.body.scrollLeft; 
left += rect.left; right += rect.right; 
top += rect.top; bottom += rect.bottom; 
} 
return { "left": left, "top": top, "right": right, "bottom": bottom }; 
}; 
window.hasClass = function(element, className){ 
return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)')); 
}; 
window.addClass = function(element, className){ 
!window.hasClass(element, className)&&(element.className += " "+className); 
}; 
window.removeClass = function(element, className){ 
window.hasClass(element, className)&&(element.className = element.className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' ')); 
} 
})(window); 
//---------------------------------------------------------------------------------------------- 
var menu = { 
//定時器 
time : null, 
//判斷是那種類型的菜單 橫的(y)還是縱的(x) 
type : null, 
//一個集合 記錄那些popup 
list : [], 
// 延遲消失的時間 
t : 300, 
foucsLi :[], 
//ul li的樣式 因為popup裡面是取不到本頁面上樣式的 只能每次創建ppopup的是添加樣式 
style : { 
ul : 'width:140px;margin:0px;padding:0;px; list-style:none;cursor:pointer;font-size:12px; border:1px solid #FFB26e;', 
li : 'height:22px;line-height:22px;padding:0 10px; margin:0px;background-color:#fcfcfc;cursor:pointer;', 
focus : 'background-color:FE6100;color:#ffffff' 
}, 
init : function(ul,data){ 
this.ul = ul; 
this.isOver = false; 
//給每個li做上標識 在後面去數據用的 
each(ul.getElementsByTagName('li'),function(i,li){ 
li.setAttribute('pa_ui_num',i); 
}); 
addListener(ul,'mouseover',BindAsEventListener(this,this.openPopup,ul,document,data)); 
addListener(ul,'mouseout',BindAsEventListener(this,this.hidea,ul)); 
}, 
openPopup : function(e,ul,doc,data){ 
this.clear(); 
//第一出發 和之後的子菜單出發有些情況是不一樣的處理方式 this.ul===ul是第一次出發使用 
this.ul===ul?(this.isOver=true):(this.findul(ul).obj.is=true); 
var li = e.srcElement,popup = ul.popup?ul.popup:ul.popup=doc.parentWindow.createPopup(); 
//利用冒泡原理 這樣只需要給外層元素ul綁定一個事件就行了 
if(li.nodeName.toLowerCase()==='li'){ 
each(ul.getElementsByTagName('li'),function(i,elem){ 
removeClass(elem,'focus'); 
}); 
addClass(li,'focus'); 
//變過樣式的li添加到this.foucsLi中 
//this.foucsLi.push(li); 
var num =li.getAttribute('pa_ui_num'),cDoc =popup.document,str = ''; 
//下面5行都是取數據 
if(this.ul!=ul&&data[num].menu===undefined){ 
popup.hide(); 
return; 
} 
data = this.ul===ul?data[num]:data[num].menu; 
// 下面一段都是生成li和ul 
each(data,function(i,menu){ 
str = str +"<li pa_ui_num="+i+" pa_ui_menuie_url='"+menu.url+"'>"+menu.txt+"</li>"; 
}); 
var cul = cDoc.getElementsByTagName('ul')[0]; 
//第一次的時候生成ul 之後就一直用之前的ul 
if(cul){ 
cul.innerHTML = str; 
//為什麼要刪除事件了 因為一只都是用的 一個popup 但是參數不同 所以只要刪除後重新綁定 來跟新數據 
removeListener(cul,'mouseover'); 
removeListener(cul,'mouseout'); 
removeListener(cul,'click'); 
}else{ 
//一樣要添加樣式 本頁面的樣式是去不到的 因為popup本身也相當於一個頁面 
var style=cDoc.createStyleSheet(); 
style.addRule('ul',this.style.ul); 
style.addRule('ul li',this.style.li); 
style.addRule('ul li.focus',this.style.focus); 
cDoc.body.innerHTML = "<ul>"+str+"</ul>"; 
cul = cDoc.getElementsByTagName('ul')[0]; 
} 
popup&&popup.hide(); 
//顯示的位置和大小 
if(this.ul===ul){ 
var ret = objPos(li); 
popup.show(ret.left+1,ret.top+li.offsetHeight,140,data.length*22+2,cDoc.body); 
}else{ 
popup.show(140-2,22*num,140,data.length*22+2,cDoc.body); 
} 
//把顯示出來的 popup放到this.list中 如果已經添加了 就不要重復添加了 
this.findul(cul)?(this.findul(cul).obj.is=false):this.list.push({ul:cul,is:false}); 
addListener(cul,'mouseover',BindAsEventListener(this,this.openPopup,cul,cDoc,data)); 
addListener(cul,'click',BindAsEventListener(this,this.reUrl)); 
addListener(cul,'mouseout',BindAsEventListener(this,this.hidea,this.ul,cul)); 
} 
}, 
reUrl : function(e){ 
if(e.srcElement.nodeName.toLowerCase() ==='li') 
alert(e.srcElement.getAttribute('pa_ui_menuie_url')) 
}, 
clear : function(){ 
clearTimeout(this.time); 
this.time = null; 
}, 
hidea : function(e,ul,cul){ 
var li = e.srcElement,self=this,callback=this.findul(cul||''); 
if(!cul){ 
this.isOver = false; 
this.list.length>0&&this.list[0].is===true?this.foucsLi.push(li):removeClass(li,'focus'); 
}else{ 
var i=callback.id+1,l=this.list.length,p=false; 
for(;i<l;i++){ 
if(this.list[i].is===true)p=true 
} 
callback.obj.is = false; 
p?this.foucsLi.push(li):removeClass(li,'focus'); 
} 
if(this.time!= null)return; 
//之所以不用之前那個 this.findul(cul||'') 是因為修改狀態在那個後面 
if(this.findul(cul||'').is||this.isOver===true)return; 
this.time = setTimeout(function(){ 
var p=false 
each(self.list,function(i,o){ 
if(o.is===true)p=true 
}); 
if(p)return 
each(self.foucsLi,function(i,o){ 
removeClass(o,'focus'); 
}); 
ul.popup.hide(); 
},this.t); 
}, 
findul : function(ul){ 
//在this.list中尋找ul 
//p代表是否找到 n代表索引 is代表是不是全部不選中狀態 
var p = false,n,is=false; 
each(this.list,function(i,o){ 
o.is===true&&(is=true); 
if(ul===o.ul){ 
p = true; 
n=i; 
}; 
}); 
return p?{obj:this.list[n],id:n,is:is}:false; 
} 
}; 
window.onload = function(){ 
var data1 = [ 
[{url:"http://www.baidu.com","txt":"大法師","menu":[{url:"http: //www.baidu.com","txt":"大法技能","menu":[{url:"http: //www.baidu.com","txt":"水元素","menu": [{url:"http://www.baidu.com","txt":"召喚物"},{url:"http: //www.baidu.com","txt":"穿刺攻擊"},{url:"http://www.baidu.com","txt":"很好東西"}]},{url:"http://www.baidu.com","txt":"暴風雪","menu": [{url:"http://www.baidu.com","txt":"魔法攻擊"},{url:"http: //www.baidu.com","txt":"面積傷害"},{url:"http://www.baidu.com","txt":"很漂亮"}, {url:"http://www.baidu.com","txt":"可被打斷"}]},{url:"http: //www.baidu.com","txt":"輝煌光環"},{url:"http://www.baidu.com","txt":"瞬間移動"}]},{url:"http://www.baidu.com","txt":"英雄說明","menu":[{url:"http: //www.baidu.com","txt":"智力英雄"},{url:"http://www.baidu.com","txt":"強大光環"},{url:"http://www.baidu.com","txt":"輔助型"}]}]},{url:"http: //www.baidu.com","txt":"山丘之王","menu":[{url:"http: //www.baidu.com","txt":"山丘技能","menu": [{url:"http://www.baidu.com","txt":"風暴之錘"},{url:"http: //www.baidu.com","txt":"錐地"},{url:"http://www.baidu.com","txt":"錐暈"}, {url:"http://www.baidu.com","txt":"天神下凡"}]},{url:"http: //www.baidu.com","txt":"英雄說明","menu":[{url:"http: //www.baidu.com","txt":"力量英雄"},{url:"http://www.baidu.com","txt":"秒殺能力"},{url:"http://www.baidu.com","txt":"個子很矮"},{url:"http: //www.baidu.com","txt":"大技變態"}]}]},{url:"http://www.baidu.com","txt":"聖騎士","menu":[{url:"http://www.baidu.com","txt":"聖騎技能","menu":[{url:"http: //www.baidu.com","txt":"光"},{url:"http://www.baidu.com","txt":"無敵"}, {url:"http://www.baidu.com","txt":"光環"},{url:"http: //www.baidu.com","txt":"復活"}]},{url:"http://www.baidu.com","txt":"英雄說明","menu":[{url:"http://www.baidu.com","txt":"力量英雄"}, {url:"http://www.baidu.com","txt":"輔助英雄"},{url:"http: //www.baidu.com","txt":"人稱奶媽"}]}]},{url:"http://www.baidu.com","txt":"血法師","menu":[{url:"http://www.baidu.com","txt":"血法技能","menu":[{url:"http: //www.baidu.com","txt":"火焰"},{url:"http://www.baidu.com","txt":"吸藍"}, {url:"http://www.baidu.com","txt":"虛無"},{url:"http: //www.baidu.com","txt":"神鳥鳳凰"}]}, {url:"http://www.baidu.com","txt":"英雄說明","menu":[{url:"http: //www.baidu.com","txt":"智力英雄"},{url:"http://www.baidu.com","txt":"輔助英雄"},{url:"http://www.baidu.com","txt":"長的很帥"}]}]}], 
[{url:"http://www.baidu.com","txt":"賤聖","menu":[{url:"http: //www.baidu.com","txt":"賤聖技能","menu":[{url:"http: //www.baidu.com","txt":"疾風步"},{url:"http://www.baidu.com","txt":"影分身"}, {url:"http://www.baidu.com","txt":"致命一擊"},{url:"http: //www.baidu.com","txt":"劍刃風暴"}]},{url:"http://www.baidu.com","txt":"英雄說明","menu":[{url:"http://www.baidu.com","txt":"敏捷英雄"}, {url:"http://www.baidu.com","txt":"高攻英雄"},{url:"http: //www.baidu.com","txt":"殺人越貨"},{url:"http://www.baidu.com","txt":"猥亵無敵"},{url:"http://www.baidu.com","txt":"非常強大"}]}]},{url:"http: //www.baidu.com","txt":" 先知男","menu":[{url:"http://www.baidu.com","txt":"先知技能","menu": [{url:"http://www.baidu.com","txt":"狼"},{url:"http: //www.baidu.com","txt":"日"},{url:"http://www.baidu.com","txt":"閃電鏈"}, {url:"http://www.baidu.com","txt":"地震"}]},{url:"http: //www.baidu.com","txt":"英雄說明","menu":[{url:"http: //www.baidu.com","txt":"智力英雄"},{url:"http://www.baidu.com","txt":"騷擾英雄"}]}]},{url:"http://www.baidu.com","txt":"牛頭人酋長","menu":[{url:"http: //www.baidu.com","txt":"牛頭技能","menu":[{url:"http: //www.baidu.com","txt":"沖擊波"}, {url:"http://www.baidu.com","txt":"陣地"},{url:"http: //www.baidu.com","txt":"耐久光環"},{url:"http://www.baidu.com","txt":"復活"}]},{url:"http://www.baidu.com","txt":"英雄說明","menu": [{url:"http://www.baidu.com","txt":"力量英雄"},{url:"http: //www.baidu.com","txt":"魔法強大"},{url:"http://www.baidu.com","txt":"長的威猛"},{url:"http://www.baidu.com","txt":"一個肉盾"}]}]}, {url:"http://www.baidu.com","txt":"小YY","menu":[{url:"http: //www.baidu.com","txt":"小Y技能","menu":[{url:"http: //www.baidu.com","txt":"變動物"},{url:"http://www.baidu.com","txt":"治療波"}, {url:"http://www.baidu.com","txt":"小蛇棒子"},{url:"http: //www.baidu.com","txt":"全體無敵"}]},{url:"http://www.baidu.com","txt":"英雄說明","menu":[{url:"http://www.baidu.com","txt":"敏捷英雄"}, {url:"http://www.baidu.com","txt":"魔法強大"},{url:"http: //www.baidu.com","txt":"輔助英雄"}]}]}], 
[{url:"http://www.baidu.com","txt":"死亡騎士","menu":[{url:"http: //www.baidu.com","txt":"亡騎技能","menu":[{url:"http://www.baidu.com",txt:"大便一拓"},{url:"http://www.baidu.com",txt:"邪惡光環"}, {url:"http://www.baidu.com",txt:"死亡契約"},{url:"http: //www.baidu.com",txt:"復活亡靈"}]},{url:"http://www.baidu.com","txt":"英雄說明","menu":[{url:"http://www.baidu.com",txt:"騎的是羊"},{url:"http: //www.baidu.com",txt:"未老先衰"},{url:"http://www.baidu.com",txt:"冰霜之哀"}, {url:"http://www.baidu.com",txt:"啊而塞思"}]}]},{url:"http: //www.baidu.com","txt":"巫妖","menu":[{url:"http://www.baidu.com","txt":"巫妖技能","menu":[{url:"http://www.baidu.com",txt:"暴冰"},{url:"http: //www.baidu.com",txt:"冰甲"},{url:"http://www.baidu.com",txt:"契約"}, {url:"http://www.baidu.com",txt:"死亡凋零"}]},{url:"http: //www.baidu.com","txt":"英雄說明","menu":[{url:"http://www.baidu.com",txt:"穿裙子"},{url:"http://www.baidu.com",txt:"全是骨頭"},{url:"http: //www.baidu.com",txt:"不男不女"}]}]},{url:"http://www.baidu.com","txt":"恐懼魔王","menu":[{url:"http://www.baidu.com","txt":"魔王技能"},{url:"http: //www.baidu.com","txt":"英雄說明"}]},{url:"http://www.baidu.com","txt":"小強王子","menu": [{url:"http://www.baidu.com","txt":"王子技能"},{url:"http: //www.baidu.com","txt":"英雄說明"}]}] 
]; 
menu.init($('demo1'),data1); 
}; 
</script> 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:jquery之empty()與remove()區別說明
下一頁:基於jquery的表格排序

JQuery特效代碼

jquery高級編程的最佳實踐詳解: 加載jQuery1.堅持使用CDN來加載jQuery，這種別人服務器免費幫你托管文件的便宜干嘛不占呢
Jquery 實現checkbox全選方法: 昨天早上有寫到怎麼利用Jquery實現全選根據大家的意見對程序中一些寫法不好的地方進行了修改，也是本
各種效果的jquery ui(接口)介紹: 基本的鼠標互動：拖拽(drag and dropping)、排序(sorting)、選擇(selec

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

DIV CSS 佈局教程網

相關文章