HTML5学堂-码匠 HTML5学堂

您当前位于:jQuery 实战开发 ——> jQuery特效实战开发 - 实例:细微但舒服的导航文字变化

jQuery特效实战开发 - 实例:细微但舒服的导航文字变化

2015/06/09 23:58:56 | 作者:HTML5学堂(码匠) | 分类:jQuery 实战开发 | 关键词:JQ特效,导航特效,动画,JQ,jQuery

JQ特效—导航文字细微变化

HTML5学堂:导航文字细微变化效果是我们在网站中常见的导航优化方式。在有些网站中,用户把鼠标移动在导航上时,导航生硬的hover效果极大影响了用户体验,导航用户体验优化就成了很关键的一部分。该效果的功能使用户把鼠标移入到相应导航标题时,标题文字向右缓慢运动,同时背景颜色发生变化(加深)。

效果需求

导航在HTML5有多种多样的优化方式,本文将为大家分享一款导航文字细微变化的导航优化效果。该款效果从视觉上看起来简单大方,当用户把鼠标移入到相应导航标题时,标题文字向右缓慢运动,同时背景颜色发生变化(加深)。

效果展示

HTML5学堂 导航渐变效果

效果实现

结构代码

  1. <body>
  2. <ul class="wrap clearfix">
  3.     <li>IE6浏览器常见兼容问题汇总</li>
  4.     <li>hasLayout</li>
  5.     <li>IE6横向外边距叠加的BUG</li>
  6.     <li>盒模型的怪异解析</li>
  7.     <li>变态的inline-block</li>
  8.     <li>letter-spacing与字体大小关系</li>
  9.     <li>IE6实现min-width效果</li>
  10.     <li>a的伪类:hover兼容问题</li>
  11.     <li>JavaScript事件详细讲解</li>
  12.     <li>FireFox与IE-JS脚本差异</li>
  13.     <li>如何获取body的scrollTop</li>
  14.     <li>文档碎片</li>
  15.     <li>旧浏览器支持HTML5新标签</li>
  16.     <li>获取各种浏览器可见窗口大小</li>
  17.     <li>JavaScript内存管理</li>
  18.     <li>JavaScript解析与执行机制</li>
  19. </ul>
  20. </body>

以上代码为导航文字细微变化效果的HTML结构,根据标签的语义性选择ul标签,子元素为li,用来表示列表项。

欢迎沟通交流~HTML5学堂

样式代码

  1. <style>
  2. .wrap {
  3.     width: 800px;
  4.     margin: 0 auto;
  5. }
  6. .wrap li {
  7.     float: left;
  8.     width: 190px;
  9.     height: 40px;
  10.     margin-right: 10px;
  11.     margin-bottom: 10px;
  12.     font-size: 14px;
  13.     line-height: 40px;
  14.     text-indent: 1em;
  15.     overflow: hidden;
  16.     cursor: pointer;
  17.     background: rgba(255, 219, 219, 0.4);
  18. }
  19. .wrap li:hover {
  20.     background: #FCC;
  21. }
  22. </style>

以上代码为导航文字细微变化效果的CSS样式代码,类名为wrap表示的是ul标签,设置了宽高及水平居中,并采用后代选择器,对子元素li进行样式的修改,li标签全部浮动,且设置了宽高、外边距、字体、背景色等基本样式。并给每个li标签设置了hover效果,鼠标移入的时候,背景颜色发生变化。

行为代码

  1. <script>
  2. $('.wrap li').hover(function(){
  3.     $(this).stop().animate({
  4.         "text-indent" : "2em"
  5.     })}, function(){
  6.         $(this).stop().animate({
  7.             "text-indent" : "1em"
  8.     })
  9. })
  10.     </script>

以上代码为导航文字细微变化效果的jQuery行为代码,首先使用选择器选定类名为wrap下的每个li标签,并给li标签绑定了jQuery的hover事件,当鼠标移入的时候,执行以上代码的第3行和第4行。当前鼠标悬停在某个导航选项上时,该选项执行了jQuery的动画效果,.animate({"text-indent" : "2em"})表示的是jQuery自定义的动画,文字缩进的值变为2em,当鼠标移开该选项时,执行第6行~第8行代码,表示该导航选项的文字缩进值恢复至css中设置的1em。

注意事项

请大家注意,在jQuery动画前需要加入语法.stop(),目的是为了防止多次动画冲突。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS