教程集 > jQuery > jquery 教程 > 正文 jquery 导航条的效果(css选择器控制)

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

发布时间：2013-08-14 编辑：jiaochengji.com

jquery 导航条的效果，主要是针对css的控制。

<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>

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

您可能感兴趣的文章：
jquery 导航条的效果(css选择器控制)
jquery导航固定效果实例
 jquery 遮罩层效果实现的导航菜单
 大型公司CSS书写规范及顺序命名规则详解
 jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
 前端DIV CSS命名规范大全
 jQuery 选择器项目实例分析及实现代码
 CSS3单页面垂直固定导航的例子
 基于JQuery的6个Tab选项卡插件
 jquery遮罩层效果实现导航菜单代码

上一篇：jquery 弹出公告功能代码下一篇：jQuery select操作控制方法小结

[关闭]

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

最近更新

浏览排行