標籤：images 提示 margin next mouseover 位置 jquer init 電腦
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.8.2.min.js"> 7 </script> 8 <style type="text/css"> 9 body{font-size:13px} 10 ul,li{list-style-type:none;padding:0px;margin:0px} 11 .menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2} 12 .optn{width:190px;line-height:28px;border-top:dashed 1px #ccc} 13 .content{padding-top:10px;clear:left} 14 a{text-decoration:none;color:#666;padding:10px} 15 .optnFocus{background-color:#fff;font-weight:bold} 16 div{padding:10px} 17 div img{float:left;padding-right:6px} 18 span{padding-top:3px;font-size:14px;font-weight:bold;float:left} 19 .tip{width:190px;border:solid 2px #ffa200;position:absolute;padding:10px; 20 background-color:#fff;display:none} 21 .tip li{line-height:23px;} 22 #sort{position:absolute;display:none} 23 </style> 24 <script type="text/javascript"> 25 $(function() { 26 var curY; //擷取所選項的Top值 27 var curH; //擷取所選項的Height值 28 var curW; //擷取所選項的Width值 29 var srtY; //設定提示箭頭的Top值 30 var srtX; //設定提示箭頭的Left值 31 var objL; //擷取當前對象 32 /* 33 *設定當前位置數值 34 *參數obj為當前對象名稱 35 */ 36 function setInitValue(obj) { 37 curY = obj.offset().top 38 curH = obj.height(); 39 curW = obj.width(); 40 srtY = curY + (curH / 2) + "px"; //設定提示箭頭的Top值 41 srtX = curW - 5 + "px"; //設定提示箭頭的Left值 42 } 43 $(".optn").mouseover(function() {//設定當前所選項的滑鼠滑過事件 44 objL = $(this); //擷取當前對象 45 setInitValue(objL); //設定當前位置 46 var allY = curY - curH + "px"; //設定提示框的Top值 47 objL.addClass("optnFocus"); //增加擷取焦點時的樣式 48 objL.next("ul").show().css({ "top": allY, "left": curW }) //顯示並設定提示框的座標 49 $("#sort").show().css({ "top": srtY, "left": srtX }); //顯示並設定提示箭頭的座標 50 }) 51 .mouseout(function() {//設定當前所選項的滑鼠移出事件 52 $(this).removeClass("optnFocus"); //刪除擷取焦點時的樣式 53 $(this).next("ul").hide(); //隱藏提示框 54 $("#sort").hide(); //隱藏提示箭頭 55 }) 56 $(".tip").mousemove(function() { 57 $(this).show(); //顯示提示框 58 objL = $(this).prev("li"); //擷取當前的上級li對象 59 setInitValue(objL); //設定當前位置 60 objL.addClass("optnFocus"); //增加上級li對象擷取焦點時的樣式 61 $("#sort").show().css({ "top": srtY, "left": srtX }); //顯示並設定提示箭頭的座標 62 }) 63 .mouseout(function() { 64 $(this).hide(); //隱藏提示框 65 $(this).prev("li").removeClass("optnFocus"); //刪除擷取焦點時的樣式 66 $("#sort").hide(); //隱藏提示箭頭 67 }) 68 }) 69 </script> 70 </head> 71 <body> 72 <ul> 73 <li class="menu"> 74 <div> 75 <img src="Images/icon.gif" /> 76 <span>電腦數位類產品</span> 77 </div> 78 <ul class="content"> 79 <li class="optn"><a href="#">筆記本</a></li> 80 <ul class="tip"> 81 <li><a href="#">筆記本1</a></li> 82 <li><a href="#">筆記本2</a></li> 83 <li><a href="#">筆記本3</a></li> 84 <li><a href="#">筆記本4</a></li> 85 <li><a href="#">筆記本5</a></li> 86 </ul> 87 <li class="optn"><a href="#">移動硬碟</a></li> 88 <ul class="tip"> 89 <li><a href="#">移動硬碟1</a></li> 90 <li><a href="#">移動硬碟2</a></li> 91 <li><a href="#">移動硬碟3</a></li> 92 <li><a href="#">移動硬碟4</a></li> 93 <li><a href="#">移動硬碟5</a></li> 94 </ul> 95 <li class="optn"><a href="#">電腦軟體</a></li> 96 <ul class="tip"> 97 <li><a href="#">電腦軟體1</a></li> 98 <li><a href="#">電腦軟體2</a></li> 99 <li><a href="#">電腦軟體3</a></li>100 <li><a href="#">電腦軟體4</a></li>101 <li><a href="#">電腦軟體5</a></li>102 </ul>103 <li class="optn"><a href="#">數位產品</a></li>104 <ul class="tip">105 <li><a href="#">數位產品1</a></li>106 <li><a href="#">數位產品2</a></li>107 <li><a href="#">數位產品3</a></li>108 <li><a href="#">數位產品4</a></li>109 <li><a href="#">數位產品5</a></li>110 </ul>111 </ul>112 <img id="sort" src="Images/sort.gif" />113 </li>114 </ul>115 </body>116 </html>
jQuery-二級導航
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
