软件开发培训班 >> 编程开发 >> JavaScript

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>

技术文章快速查找

javascript奇异的arguments分析

Jsonp 跨域的原理以及Jquery的解决方案

onmouseover和onmouseout的一些问题思考

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

javascript时区函数介绍

详述JavaScript 代码显示经过 JSON 序列化的文本

js与jquery中获取当前鼠标的x、y坐标位置的代码

HTTP 304错误的详细讲解

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建