- 浏览: 127669 次
- 性别:
- 来自: 福建
文章分类
- 全部博客 (105)
- 数据库 (4)
- hibernate (4)
- css3 (2)
- 前端设计 (13)
- struts (6)
- HTML5 (1)
- jQuery (16)
- JDBC (3)
- spring (6)
- 娱乐 (1)
- MyEclipse (2)
- oracle (4)
- javascript (10)
- ibatis (2)
- log4j (1)
- css (16)
- java (13)
- IText (1)
- IDE (1)
- C3P0 (1)
- ssi (1)
- IO (1)
- jsp (1)
- JSTL (1)
- JXL (1)
- ssh (1)
- ajax (2)
- struts2 (1)
- html (1)
- 正则表达式 (1)
- 非技术 (1)
- Properties (1)
- Tomcat (1)
- 电大 (0)
- test (0)
最新评论
-
yejq:
收藏~~
使用 Ctrl + Enter 提交表单
效果图:
css:
* { margin:0; padding:0; } body { background:#fff url(top_bg.png) repeat-x 0 0; color:#5b5b5b; height:100%; font:normal normal 12px/24px "微软雅黑", "Microsoft YaHei", "黑体"; } ul { list-style:none; } #wrapper { width:960px; margin: 0 auto; text-align:center; padding-top:35px; } h1 { font: italic normal 32px/45px "Lucida Sans Unicode", "Lucida Grande", sans-serif; color:#fff; } h4 { color:#fff; font: italic normal 14px Arial, Helvetica, sans-serif; text-align:right; margin-right:255px; } h4 a { color:#fff; border-bottom:1px dotted #fff; text-decoration:none; font-style:normal; } h4 a:hover { color:#202020; border-bottom:1px solid #202020;} #nav { width:432px; margin:49px auto 0; /*让元素在页面居中*/ } #nav li { width:68px; height:88px; float:left; margin:0 2px; position:relative; /*li标签相对定位*/ text-align:center; z-index:5; display:inline; } #nav li span { color:#fff; width:68px; background:url(nav_bg.png) no-repeat 0 0;/*滑动背景添加到span标签中*/ position:absolute; /*span标签绝对定位*/ top:0; left:0; z-index:10;/*span标签要在a标签的下面,所以层叠顺序要小于a标签的层叠顺序*/ font-size:11px; height:58px; padding-top:30px; display:none;/*在默认状态下span标签是隐藏的*/ } #nav li a { color:#202020; font-size:14px; letter-spacing:0.5px; width:68px; display:block; position:absolute;/*a标签也同样需要绝对定位*/ top:0; left:0; z-index:20;/*但是a标签的层叠顺序应该是大于span标签的,这样才能确保a标签不被span标签遮盖住*/ height:35px; padding-top:55px; text-decoration:none; } #nav li.on span { display:block;} #nav li.on a { color:#fff;}
javascript:
$(function(){ $('#nav li').children('a').hover(function(){//查找li标签中的a标签并且为a标签绑定一个鼠标悬停的事件 $(this).siblings('span').slideDown(100);//当鼠标悬停的时候查找a标签的同辈span标签,并给span标签添加一个滑下来的效果(显示) var changeColor = this; this.timer = setTimeout(function(){ $(changeColor).css({'color':'#fff'});//当span标签滑下来后a标签更改字体的颜色为白色 },100); },function(){ if(this.timer) clearTimeout(this.timer); $(this).siblings('span').slideUp(100);//当鼠标离开的时候查找a标签的同辈span标签,并给span标签添加一个滑上去的效果(隐藏) $(this).css({'color':'#202020'});//当span标签滑上去后a标签更改字体的颜色为黑色 }); });
html:
<div id="wrapper"> <h1>基于jQuery的滑动式动画导航栏</h1> <h4>by:<a href="http://www.stylechen.com">Stylechen</a></h4> <ul id="nav"> <li class="on"><span>HOME</span><a href="#">首页</a></li> <li><span>ABOUT</span><a href="#">我们</a></li> <li><span>SERVICES</span><a href="#">服务</a></li> <li><span>WORK</span><a href="#">工作</a></li> <li><span>CLIENT</span><a href="#">客户</a></li> <li><span>CONTACT</span><a href="#">联系</a></li> </ul> </div>
发表评论
-
jQuery+CSS让两栏或多栏布局高度自动一致
2013-07-11 14:56 924<!DOCTYPE html PUBLIC &qu ... -
jquery 框架在google地址
2013-01-08 15:19 725https://developers.google.com/s ... -
兼容各浏览器的点击复制文本框内容的Jquery插件【转载】
2012-12-20 15:59 1070注:因为采用FLASH控件的文件实现兼容,所以本页面中 ... -
Ajax+Jquery评论特效
2012-12-14 16:53 801效果图 -
Jquery实现评论内容上下滑动切换效果
2012-11-28 11:28 1489Jquery实现评论内容上下滑动切换效果 -
jquery聚光灯插件
2012-05-30 17:25 1030效果图: -
JS仿淘宝网顶部的导航菜单-导航菜单类
2012-05-25 17:53 1127JS仿淘宝网顶部的导航菜单-导航菜单类 -
jBreadCrumb插件
2012-05-02 10:59 869效果图: download: http ... -
jQuery邮箱自动完成插件
2012-05-02 10:23 960参数: deValue:文本框内默认值 ... -
网站首页的焦点图JQuery实现插件
2012-05-02 10:18 720网站首页的焦点图JQuery实现插件 效果图: -
图片放大镜
2012-05-02 10:14 681图片放大镜 效果如下: -
放大镜
2012-05-02 10:10 750该插件在IE8及版本更低的IE浏览器中有些问题,圆形的放大 ... -
jQuery ajax删除
2012-03-27 17:59 1453jQuery ajax删除 <!DOCTYPE ... -
很牛的弹出层看看不后悔
2012-03-19 14:05 1366很牛的弹出层看看不后悔【转载】 [img][/img]先让我 ... -
Jquery validate 验证
2011-08-01 19:58 1117转自:http://blog.sina.com.cn/s/bl ...
相关推荐
主要介绍了基于jquery实现百度新闻导航菜单滑动动画,感兴趣的小伙伴们可以参考一下
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
jQuery动态切换网页背景的大块图片的导航栏代码 jquery图文排行混合互相切换效果(仿Vancl效果) jQuery图片AnimatedPortfolioGallery jQuery图片AnimatedTextIconMenu jQuery图片BubblerifficImageGallery jQuery图片...
7.jquery+div实用漂亮精致的多级导航栏菜单插件代码示例 8.jQuery+ul实现漂亮竖直下拉菜单 9.jquery仿google首页图标动画菜单效果实现模拟鼠标动画菜单的代码 10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的...
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
2.3 综合案例分析—导航条在项目中的应用/37 2.3.1 需求分析/37 2.3.2 效果界面/38 2.3.3 功能实现/38 2.3.4 代码分析/40 2.4 本章小结/41 第3章 jQuery操作DOM /42 3.1 DOM基础/43 3.2 访问元素/44 3.2.1...
10.9 在页脚区域添加导航栏 10.10 添加可折叠的导航按钮 10.11 实现可折叠的输入表单 10.12 实现手风琴样式的折叠面板 10.13 使用网格打造简单的九宫格界面 10.14 可动态隐藏的页眉和页脚 10.15 最简单的手机相册 ...
16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件...
《jQuery攻略》对使用jQuery过程中遇到的各类问题给出了解决方案,比如,如何使用jQuery框架、CSS选择器、DOM、事件处理、动画效果,以及如何开发Ajax应用程序、如何使用jQuery工具函数、如何使用插件扩展jQuery。...