jQuery第三十一天练习

　　                                                    
           
菜单一             
               
菜单一
               
菜单二
               
菜单三
               
菜单四
               
菜单五                 
                   
菜单一
                   
菜单二
                   
菜单三
                   
菜单四
                   
菜单五                     
                       
菜单一
                       
菜单二
                       
菜单三
                       
菜单四
                       
菜单五                      
                       
菜单一
                       
菜单二
                       
菜单三
                       
菜单四
                       
菜单五
                       
                        
                     
                   
                 
               
             
           
            
菜单二             
               
菜单一
               
菜单二
               
菜单三                 
                   
菜单一
                   
菜单二
                   
菜单三                     
                       
菜单一
                       
菜单二
                       
菜单三
                       
菜单四
                       
菜单五
                     
                   
                   
菜单四
                 
               
             
           
           
菜单三
           
菜单四
           
菜单五                      
               
菜单一
               
菜单二
               
菜单三
           
            
         
       
　　DD_belatedPNG.js  /** * DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML . * Author: Drew Diller * Email: drew.diller@gmail.com * URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/ * Version: 0.0.8a * Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license * * Example usage: * DD_belatedPNG.fix(＂.png_bg＂); // argument is a CSS selector * DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement **/  /* PLEASE READ: Absolutely everything in this script is SILLY.  I know this.  IE＂s rendering of certain pixels doesn＂t make sense, so neither does this code! */  var DD_belatedPNG = { 	ns: ＂DD_belatedPNG＂, 	imgSize: {}, 	delay: 10, 	nodesFixed: 0, 	createVmlNameSpace: function () { /* enable VML */ 		if (document.namespaces && !document.namespaces[this.ns]) { 			document.namespaces.add(this.ns, ＂urn:schemas-microsoft-com:vml＂); 		} 	}, 	createVmlStyleSheet: function () { /* style VML, enable behaviors */ 		/* 			Just in case lots of other developers have added 			lots of other stylesheets using document.createStyleSheet 			and hit the 31-limit mark, let＂s not use that method! 			further reading: http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx 		*/ 		var screenStyleSheet, printStyleSheet; 		screenStyleSheet = document.createElement(＂style＂); 		screenStyleSheet.setAttribute(＂media＂, ＂screen＂); 		document.documentElement.firstChild.insertBefore(screenStyleSheet, document.documentElement.firstChild.firstChild); 		if (screenStyleSheet.styleSheet) { 			screenStyleSheet = screenStyleSheet.styleSheet; 			screenStyleSheet.addRule(this.ns + ＂:*＂, ＂{behavior:url(#default#VML)}＂); 			screenStyleSheet.addRule(this.ns + ＂:shape＂, ＂position:absolute;＂); 			screenStyleSheet.addRule(＂img.＂ + this.ns + ＂_sizeFinder＂, ＂behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;＂); /* large negative top value for avoiding vertical scrollbars for large images, suggested by James O＂Brien, http://www.thanatopsic.org/hendrik/ */ 			this.screenStyleSheet = screenStyleSheet; 			 			/* Add a print-media stylesheet, for preventing VML artifacts from showing up in print (including preview). */ 			/* Thanks to R�mi Pr�vost for automating this! */ 			printStyleSheet = document.createElement(＂style＂); 			printStyleSheet.setAttribute(＂media＂, ＂print＂); 			document.documentElement.firstChild.insertBefore(printStyleSheet, document.documentElement.firstChild.firstChild); 			printStyleSheet = printStyleSheet.styleSheet; 			printStyleSheet.addRule(this.ns + ＂:*＂, ＂{display: none !important;}＂); 			printStyleSheet.addRule(＂img.＂ + this.ns + ＂_sizeFinder＂, ＂{display: none !important;}＂); 		} 	}, 	readPropertyChange: function () { 		var el, display, v; 		el = event.srcElement; 		if (!el.vmlInitiated) { 			return; 		} 		if (event.propertyName.search(＂background＂) != -1 || event.propertyName.search(＂border＂) != -1) { 			DD_belatedPNG.applyVML(el); 		} 		if (event.propertyName == ＂style.display＂) { 			display = (el.currentStyle.display == ＂none＂) ? ＂none＂ : ＂block＂; 			for (v in el.vml) { 				if (el.vml.hasOwnProperty(v)) { 					el.vml[v].shape.style.display = display; 				} 			} 		} 		if (event.propertyName.search(＂filter＂) != -1) { 			DD_belatedPNG.vmlOpacity(el); 		} 	}, 	vmlOpacity: function (el) { 		if (el.currentStyle.filter.search(＂lpha＂) != -1) { 			var trans = el.currentStyle.filter; 			trans = parseInt(trans.substring(trans.lastIndexOf(＂=＂)+1, trans.lastIndexOf(＂)＂)), 10)/100; 			el.vml.color.shape.style.filter = el.currentStyle.filter; /* complete guesswork */ 			el.vml.image.fill.opacity = trans; /* complete guesswork */ 		} 	}, 	handlePseudoHover: function (el) { 		setTimeout(function () { /* wouldn＂t work as intended without setTimeout */ 			DD_belatedPNG.applyVML(el); 		}, 1); 	}, 	/** 	* This is the method to use in a document. 	* @param {String} selector - REQUIRED - a CSS selector, such as ＂#doc .container＂ 	**/ 	fix: function (selector) { 		if (this.screenStyleSheet) { 			var selectors, i; 			selectors = selector.split(＂,＂); /* multiple selectors supported, no need for multiple calls to this anymore */ 			for (i=0; i size.H) { 				c.B = size.H; 			} 			el.vml.image.shape.style.clip = ＂rect(＂+c.T+＂px ＂+(c.R+fudge)+＂px ＂+c.B+＂px ＂+(c.L+fudge)+＂px)＂; 		} 		else { 			el.vml.image.shape.style.clip = ＂rect(＂+dC.T+＂px ＂+dC.R+＂px ＂+dC.B+＂px ＂+dC.L+＂px)＂; 		} 	}, 	figurePercentage: function (bg, size, axis, position) { 		var horizontal, fraction; 		fraction = true; 		horizontal = (axis == ＂X＂); 		switch(position) { 			case ＂left＂: 			case ＂top＂: 				bg[axis] = 0; 				break; 			case ＂center＂: 				bg[axis] = 0.5; 				break; 			case ＂right＂: 			case ＂bottom＂: 				bg[axis] = 1; 				break; 			default: 				if (position.search(＂%＂) != -1) { 					bg[axis] = parseInt(position, 10) / 100; 				} 				else { 					fraction = false; 				} 		} 		bg[axis] = Math.ceil(  fraction ? ( (size[horizontal?＂W＂: ＂H＂] * bg[axis]) - (size[horizontal?＂w＂: ＂h＂] * bg[axis]) ) : parseInt(position, 10)  ); 		if (bg[axis] % 2 === 0) { 			bg[axis]++; 		} 		return bg[axis]; 	}, 	fixPng: function (el) { 		el.style.behavior = ＂none＂; 		var lib, els, nodeStr, v, e; 		if (el.nodeName == ＂BODY＂ || el.nodeName == ＂TD＂ || el.nodeName == ＂TR＂) { /* elements not supported yet */ 			return; 		} 		el.isImg = false; 		if (el.nodeName == ＂IMG＂) { 			if(el.src.toLowerCase().search(/.png$/) != -1) { 				el.isImg = true; 				el.style.visibility = ＂hidden＂; 			} 			else { 				return; 			} 		} 		else if (el.currentStyle.backgroundImage.toLowerCase().search(＂.png＂) == -1) { 			return; 		} 		lib = DD_belatedPNG; 		el.vml = {color: {}, image: {}}; 		els = {shape: {}, fill: {}}; 		for (v in el.vml) { 			if (el.vml.hasOwnProperty(v)) { 				for (e in els) { 					if (els.hasOwnProperty(e)) { 						nodeStr = lib.ns + ＂:＂ + e; 						el.vml[v][e] = document.createElement(nodeStr); 					} 				} 				el.vml[v].shape.stroked = false; 				el.vml[v].shape.appendChild(el.vml[v].fill); 				el.parentNode.insertBefore(el.vml[v].shape, el); 			} 		} 		el.vml.image.shape.fillcolor = ＂none＂; /* Don＂t show blank white shapeangle when waiting for image to load. */ 		el.vml.image.fill.type = ＂tile＂; /* Makes image show up. */ 		el.vml.color.fill.on = false; /* Actually going to apply vml element＂s style.backgroundColor, so hide the whiteness. */ 		lib.attachHandlers(el); 		lib.giveLayout(el); 		lib.giveLayout(el.offsetParent); 		el.vmlInitiated = true; 		lib.applyVML(el); /* Render! */ 	} }; try { 	document.execCommand(＂BackgroundImageCache＂, false, true); /* TredoSoft Multiple IE doesn＂t like this, so try{} it */ } catch(r) {} DD_belatedPNG.createVmlNameSpace(); DD_belatedPNG.createVmlStyleSheet();
　　效果图：