列表应用（导航菜单）
（1）功能描述：
在页面表单中，分别展示某类产品的全部子类项，当用户将鼠标移动某子类时，所选子类样式发生变化，并在该子类的右边以浮动的形式展示该类的全部产品：当用户将鼠标移除某子类时，所选子类样式恢复到初始值，同时，隐藏已显示的全部子类产品。
（2）实现代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>列表中的导航菜单应用</title> 5 <script type="text/javascript" 6 src="Jscript/jquery-1.4.2-vsdoc.js"> 7 </script> 8 <script type="text/javascript" 9 src="Jscript/jquery-1.4.2.js"> 10 </script> 11 <style type="text/css"> 12 body{font-size:13px} 13 ul,li{list-style-type:none;padding:0px;margin:0px} 14 .menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2} 15 .optn{width:190px;line-height:28px;border-top:dashed 1px #ccc} 16 .content{padding-top:10px;clear:left} 17 a{text-decoration:none;color:#666;padding:10px} 18 .optnFocus{background-color:#fff;font-weight:bold} 19 div{padding:10px} 20 div img{float:left;padding-right:6px} 21 span{padding-top:3px;font-size:14px;font-weight:bold;float:left} 22 .tip{width:190px;border:solid 2px #ffa200;position:absolute;padding:10px; 23 background-color:#fff;display:none} 24 .tip li{line-height:23px;} 25 #sort{position:absolute;display:none} 26 </style> 27 <script type="text/javascript"> 28 $(function() { 29 var curY; //获取所选项的Top值 30 var curH; //获取所选项的Height值 31 var curW; //获取所选项的Width值 32 var srtY; //设置提示箭头的Top值 33 var srtX; //设置提示箭头的Left值 34 var objL; //获取当前对象 35 /* 36 *设置当前位置数值 37 *参数obj为当前对象名称 38 */ 39 function setInitValue(obj) { 40 curY = obj.offset().top 41 curH = obj.height(); 42 curW = obj.width(); 43 srtY = curY + (curH / 2) + "px"; //设置提示箭头的Top值 44 srtX = curW - 5 + "px"; //设置提示箭头的Left值 45 } 46 $(".optn").mouseover(function() {//设置当前所选项的鼠标滑过事件 47 objL = $(this); //获取当前对象 48 setInitValue(objL); //设置当前位置 49 var allY = curY - curH + "px"; //设置提示框的Top值 50 objL.addClass("optnFocus"); //增加获取焦点时的样式 51 objL.next("ul").show().css({ "top": allY, "left": curW }) //显示并设置提示框的坐标 52 $("#sort").show().css({ "top": srtY, "left": srtX }); //显示并设置提示箭头的坐标 53 }) 54 .mouseout(function() {//设置当前所选项的鼠标移出事件 55 $(this).removeClass("optnFocus"); //删除获取焦点时的样式 56 $(this).next("ul").hide(); //隐藏提示框 57 $("#sort").hide(); //隐藏提示箭头 58 }) 59 $(".tip").mousemove(function() { 60 $(this).show(); //显示提示框 61 objL = $(this).prev("li"); //获取当前的上级li对象 62 setInitValue(objL); //设置当前位置 63 objL.addClass("optnFocus"); //增加上级li对象获取焦点时的样式 64 $("#sort").show().css({ "top": srtY, "left": srtX }); //显示并设置提示箭头的坐标 65 }) 66 .mouseout(function() { 67 $(this).hide(); //隐藏提示框 68 $(this).prev("li").removeClass("optnFocus"); //删除获取焦点时的样式 69 $("#sort").hide(); //隐藏提示箭头 70 }) 71 }) 72 </script> 73 </head> 74 <body> 75 <ul> 76 <li class="menu"> 77 <div> 78 <img alt="" src="Images/icon.gif" /> 79 <span>电脑数码类产品</span> 80 </div> 81 <ul class="content"> 82 <li class="optn"><a href="#">笔记本</a></li> 83 <ul class="tip"> 84 <li><a href="#">笔记本1</a></li> 85 <li><a href="#">笔记本2</a></li> 86 <li><a href="#">笔记本3</a></li> 87 <li><a href="#">笔记本4</a></li> 88 <li><a href="#">笔记本5</a></li> 89 </ul> 90 <li class="optn"><a href="#">移动硬盘</a></li> 91 <ul class="tip"> 92 <li><a href="#">移动硬盘1</a></li> 93 <li><a href="#">移动硬盘2</a></li> 94 <li><a href="#">移动硬盘3</a></li> 95 <li><a href="#">移动硬盘4</a></li> 96 <li><a href="#">移动硬盘5</a></li> 97 </ul> 98 <li class="optn"><a href="#">电脑软件</a></li> 99 <ul class="tip"> 100 <li><a href="#">电脑软件1</a></li> 101 <li><a href="#">电脑软件2</a></li> 102 <li><a href="#">电脑软件3</a></li> 103 <li><a href="#">电脑软件4</a></li> 104 <li><a href="#">电脑软件5</a></li> 105 </ul> 106 <li class="optn"><a href="#">数码产品</a></li> 107 <ul class="tip"> 108 <li><a href="#">数码产品1</a></li> 109 <li><a href="#">数码产品2</a></li> 110 <li><a href="#">数码产品3</a></li> 111 <li><a href="#">数码产品4</a></li> 112 <li><a href="#">数码产品5</a></li> 113 </ul> 114 </ul> 115 <img id="sort" src="Images/sort.gif" alt=""/> 116 </li> 117 </ul> 118 </body> 119 </html>
结果如下图所示：
高否？富否？帅否？
否？
滚去学习！
