当前位置：Gxlcms > JavaScript > jquery 导航条的效果(css选择器控制)

jquery 导航条的效果(css选择器控制)

时间：2021-07-01 10:21:17 帮助过：4人阅读

标题1 
标题2 
标题3 
标题4 
标题5 
标题6 
 
进入之后才能看到效果！ 
<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>

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

jquery 导航条的效果(css选择器控制)

人气教程排行