jquery實現的滑動門程式碼例項
滑動門其實就是選項卡效果,只是叫法不懂而已,下面是一個典型的滑動門程式碼例項。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .main{ height:160px; width:290px; border:1px solid #444444; font-size:12px; color:#444444; margin:20px; } .main_top{ height:30px; width:290px; line-height:30px; text-align:left; background-color:#999999; border-bottom:1px solid #444444; } .main_top ul{ padding:0px; margin:0px; list-style-type:none; position:absolute; } .main_top ul li.h_qian{ float:left; width:80px; text-align:center; background-color:#999999; height:30px; } .main_top ul li.h_hou{ float:left; width:80px; text-align:center; background-color:#ffffff; cursor:pointer; margin-top:1px; height:30px; font-weight:bold; } .main_content{ margin:10px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> function tabchange(obj,p,c,q,h) { $(obj).parent().find("li").attr("class", ""+q+""); $(obj).parents("."+p+"").find("."+c+"").hide(); $(obj).attr("class", ""+h+""); var j=$(obj).index(); $(obj).parents("."+p+"").find("."+c+":eq(" + j + ")").show(); } </script> </head> <body> <div class="main"> <div class="main_top"> <ul> <li class="h_hou" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第一模組</li> <li class="h_qian" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第二模組</li> <li class="h_qian" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第三模組</li> </ul> </div> <div class="main_content">螞蟻部落一</div> <div class="main_content" style="display:none;">螞蟻部落二</div> <div class="main_content" style="display:none;">螞蟻部落三</div> </div> </body> </html>
相關文章
- jQuery實現滑動門程式碼例項jQuery
- jquery實現的滑動軸效果程式碼例項jQuery
- jQuery實現的滑鼠滑過切換圖片程式碼例項jQuery
- jQuery實現的自動播放簡單程式碼例項jQuery
- js實現jquery的extend()程式碼例項JSjQuery
- jQuery實現的tab選項卡程式碼例項jQuery
- jquery實現的選項卡效果例項程式碼jQuery
- jquery實現的分頁效果例項程式碼jQuery
- jQuery實現的隔行變色程式碼例項jQuery
- jQuery實現的動態載入指令碼檔案程式碼例項jQuery指令碼
- jquery實現滑動門效果詳解jQuery
- jQuery實現的選項卡的巢狀程式碼例項jQuery巢狀
- jquery實現的解析xml檔案程式碼例項jQueryXML
- jQuery實現的數字分頁程式碼例項jQuery
- jQuery實現的非同步請求程式碼例項jQuery非同步
- jQuery實現的錨點平滑定位程式碼例項jQuery
- jQuery實現的JSONP應用程式碼例項jQueryJSON
- jQuery實現的div垂直水平居中例項程式碼jQuery
- jquery實現的下拉和收縮程式碼例項jQuery
- jquery.idTabs實現的選項卡程式碼例項jQuery
- jQuery實現的滑鼠滑過圖片上縮彈出文字說明程式碼例項jQuery
- jQuery實現設定字型大小程式碼例項jQuery
- 滑鼠滑過實現淡入淡出效果程式碼例項
- jQuery實現的簡單投票簡單程式碼例項jQuery
- jQuery實現的禁用右鍵選單程式碼例項jQuery
- jQuery實現的刪除指定標籤程式碼例項jQuery
- 使用jquery實現的清空表單元素程式碼例項jQuery
- jquery實現的iframe高度自適應程式碼例項jQuery
- jQuery實現的刪除指定子元素程式碼例項jQuery
- jQuery實現的圖片預載入程式碼例項jQuery
- js左右滑動選項卡效果程式碼例項JS
- jQuery is() 程式碼例項jQuery
- jQuery實現的動態載入css和js檔案程式碼例項 [jQueryCSSJS
- jQuery的ajax實現的刪除記錄程式碼例項jQuery
- jquery實現獲取outerHTML內容程式碼例項jQueryHTML
- jQuery實現圖片預載入程式碼例項jQuery
- jquery漸隱漸現程式碼例項jQuery
- js實現的元素運動程式碼例項JS