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

时间:2020-05-12 人气:0

<div> 
<div>标题1</div> 
<div>标题2</div> 
<div>标题3</div> 
<div>标题4</div> 
<div>标题5</div> 
<div>标题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>

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

加载全部内容