jquery 導航條的效果(css選擇器控制)

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery 導航條的效果(css選擇器控制)

編輯：JQuery特效代碼

<div class="all"> 
<div class="m1" jquery1274844839136="1">標題1</div> 
<div class="m2" jquery1274844839136="2">標題2</div> 
<div class="m3" jquery1274844839136="3">標題3</div> 
<div class="m4" jquery1274844839136="4">標題4</div> 
<div class="m5" jquery1274844839136="5">標題5</div> 
<div class="m6" jquery1274844839136="6">標題6</div> 
</div> 
<div>進入之後才能看到效果！</div> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script><script type="text/javascript"> 
$(document).ready(function () { 
myHide(); 
}); 
function myHide() { 
//alert("hello"); 
//注冊事件 
$(".m1").bind('mouseover', m1_mouseover); 
$(".m1").bind('mouseout', m1_mouseout); 
$(".m2").bind('mouseover', m2_mouseover); 
$(".m2").bind('mouseout', m2_mouseout); 
$(".m3").bind('mouseover', m3_mouseover); 
$(".m3").bind('mouseout', m3_mouseout); 
$(".m4").bind('mouseover', m4_mouseover); 
$(".m4").bind('mouseout', m4_mouseout); 
$(".m5").bind('mouseover', m5_mouseover); 
$(".m5").bind('mouseout', m5_mouseout); 
$(".m6").bind('mouseover', m6_mouseover); 
$(".m6").bind('mouseout', m6_mouseout); 
}; 
function m1_mouseover() { 
$(".m1").animate({ width: "100px", height: "30px",fontSize:"22px" }, "fast"); 
} 
function m1_mouseout() { 
$(".m1").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast"); 
} 
function m2_mouseover() { 
$(".m2").animate({ width: "100px", height: "30px", fontSize: "22px" }, "fast"); 
} 
function m2_mouseout() { 
$(".m2").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast"); 
} 
function m3_mouseover() { 
$(".m3").animate({ width: "100px", height: "30px", fontSize: "22px" }, "fast"); 
} 
function m3_mouseout() { 
$(".m3").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast"); 
} 
function m4_mouseover() { 
$(".m4").animate({ width: "100px", height: "30px", fontSize: "22px" }, "fast"); 
} 
function m4_mouseout() { 
$(".m4").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast"); 
} 
function m5_mouseover() { 
$(".m5").animate({ width: "100px", height: "30px", fontSize: "22px" }, "fast"); 
} 
function m5_mouseout() { 
$(".m5").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast"); 
} 
function m6_mouseover() { 
$(".m6").animate({ width: "100px", height: "30px", fontSize: "22px" }, "fast"); 
} 
function m6_mouseout() { 
$(".m6").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast"); 
} 
</script> 
<style type="text/css"> 
.m1,.m2,.m3,.m4,.m5,.m6 
{ 
width:70px; 
height:20px; 
background-color:#cccccc; 
border: thin solid #9999ff; 
font-size:14px; 
} 
.all 
{ 
width:80px; 
height:160px; 
text-align:center; 
} 
</style>

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

上一頁:jQuery select操作控制方法小結
下一頁:jquery 彈出公告功能代碼

JQuery特效代碼

jquery 利用show和hidden實現級聯菜單示例代碼: . 代碼如下: <%@ page language=java contentType=text
jQuery實現下拉框左右選擇的簡單實例: 就是實現這個效果的，選中添加到右邊，全部添加到右邊，選中刪除到左邊，全部刪除到左邊。html部分：.
基於jquery的simpleValidate簡易驗證插件: 如果你不需要做onfocus和onblur的即時驗證，如果你不想對每個表格都通過JS定義驗證規則，如

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

DIV CSS 佈局教程網

相關文章