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

更新时间：2010年05月27日 12:15:43 作者：

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> <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.extend 函数详解
Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，在此，我们一起去了解了解
2012-02-02
jQuery实现点击按钮弹出可关闭层的浮动层插件
这篇文章主要介绍了jQuery实现点击按钮弹出可关闭层的浮动层插件,具有点击弹出带有遮罩层的浮动层效果,且浮动层可拖动、可关闭,需要的朋友可以参考下
2015-09-09
jqGrid 学习笔记整理——进阶篇(一 )
这篇文章主要介绍了jqGrid 学习笔记整理——进阶篇(一 )的相关资料,需要的朋友可以参考下
2016-04-04
jquery select 设置默认选中的示例代码
本篇文章主要是对jquery select 设置默认选中的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
JQuery 学习笔记01 JQuery初接触
jQuery是一个Javascript库，用于简化Web相关的Javascript开发
2010-05-05
jQuery图片瀑布流的简单实现代码
这篇文章主要为大家详细介绍了jQuery图片瀑布流的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
jQuery实现简洁的导航菜单效果
这篇文章主要介绍了jQuery实现简洁的导航菜单效果，简洁大方的导航菜单，需要的朋友可以参考下
2015-11-11
基于jquery扩展漂亮的CheckBox(自己编写)
默认的html复选框控件样式可定义相当有限，下面就与大家分享下自己编写的CheckBox控件。喜欢的朋友可以拿去使用
2013-11-11
jQuery中extend函数详解
这篇文章主要介绍了jQuery中extend函数详解,十分详细，需要的朋友可以参考下
2015-02-02
jquery实现Ctrl+Enter提交表单的方法
这篇文章主要介绍了jquery实现Ctrl+Enter提交表单的方法,涉及jquery针对键盘按键的响应与表单操作相关技巧,非常简单实用,需要的朋友可以参考下
2015-07-07