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需再刷新一下页面才能执行]

您可能感兴趣的文章:

14款经典网页图片和文字特效的jQuery插件-前端开发必备
最近没项目做，在网上看到很多网页特效，非常漂亮，于是就整理了14款经典网页图片和文字特效的jQuery插件，有助于在项目需求中用到，前端开发必备，大家都来学习下吧
2015-08-08
jQuery+ajax实现用户登录验证
这篇文章主要为大家详细介绍了jQuery+ajax实现用户登录验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
概述jQuery中的ajax方法
本文主要对jquery 中的ajax方法进行概述讲解。具有很好的参考价值，需要的朋友一起来看下吧
2016-12-12
jQuery+css实现百度百科的页面导航效果
这篇文章主要介绍了jQuery+css实现百度百科的页面导航效果,需要的朋友可以参考下
2014-12-12
jQuery+Datatables实现表格批量删除功能【推荐】
这篇文章主要介绍了jQuery+Datatables实现表格批量删除功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-10-10
jquery ajax 如何向jsp提交表单数据
ajax技术在做表单数据传值非常棒，给用户带来很好的用户体验度，同时，使用jquery可以简化开发，提高效率。下面给大家介绍jquery ajax 如何向jsp提交表单数据，需要的朋友可以参考下
2015-08-08
Jquery 的outerHeight方法使用介绍
获取第一个匹配元素外部高度默认包括补白和边框，在本文将为大家介绍下具体的实现代码，此方法对可见和隐藏元素均有效，感兴趣的朋友可以了解下
2013-09-09
jquery封装插件时匿名函数形参和实参的写法解释
本文主要介绍了jquery封装插件时匿名函数形参和实参的写法解释。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
append和appendTo的区别以及appendChild用法
很多新手朋友们对append和appendTo的区别以及js中的appendChild用法有所模糊，下面就举例为大家详细介绍下，感兴趣的朋友不要错过
2013-12-12
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
下面小编就为初学者们分享一篇(模仿京东用户注册)用JQuery实现简单表单验证，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具