HTML5学堂-码匠 HTML5学堂

您当前位于:jQuery实战开发 ——> jQuery特效实战开发 - 实例:模拟苹果导航条

jQuery特效实战开发 - 实例:模拟苹果导航条

2015/05/22 09:35:39 | 作者:HTML5学堂(码匠) | 分类:jQuery实战开发 | 关键词:JQ特效,animate,动画,JQ,jQuery

JQ特效—仿苹果导航条

HTML5学堂:对于jQuery的学习,我们并不建议一个方法一个方法去记忆。或者说,记忆方法虽然是必要的,但是更重要的是应用。所谓条条大路通罗马,有时候同一个功能,可以用十几种方法来实现。因此,学习jQuery,应用才是王道。

效果需求

鼠标移入之后,块的大小会发生变化,相邻块也呈现阶梯式大小。

效果展示

HTML5学堂 JQ仿苹果导航条

效果实现

结构代码

  1. <body>
  2.     <div class="wrap">
  3.         <p>独行冰海</p>
  4.         <p>梦幻雪冰</p>
  5.         <p>路过心上</p>
  6.         <p>尹小芃槑</p>
  7.         <p>扶丶公子</p>
  8.     </div>
  9. </body>

欢迎沟通交流~HTML5学堂

样式代码

  1. <style type="text/css">
  2.         .wrap {
  3.             width: 510px;
  4.             height: 120px;
  5.             margin: 0 auto;
  6.             background: #eee;
  7.             font-size: 14px;
  8.         }
  9.         .wrap > p{
  10.             float: left;
  11.             width: 60px;
  12.             height: 60px;
  13.             margin: 0 5px;
  14.             padding: 0;
  15.             background: #ccc;
  16.             line-height: 60px;
  17.             text-align: center;
  18.         }
  19.     </style>

行为代码

  1. <script type="text/javascript">
  2.     /*鼠标移上,变化大小*/
  3.     var startWidth = 60;
  4.     var startHeight = 60;
  5.     var firstWidth = startWidth*2;
  6.     var firstHeight = startHeight*2;
  7.     var secondWidth = startWidth*1.6;
  8.     var secondHeight = startHeight*1.6;
  9.     var thirdWidth = startWidth*1.2;
  10.     var thirdHeight = startHeight*1.2;
  11.     $('p').hover(function () {
  12.         //实现动态变化
  13.         $(this).stop(true, true).animate({
  14.             'width' : firstWidth + 'px',
  15.             'height' : firstHeight + 'px',
  16.             'line-height' : firstHeight + 'px'
  17.         },100);
  18.         $(this).prev().stop(true, true).animate({
  19.             'width' : secondWidth + 'px',
  20.             'height' : secondHeight + 'px',
  21.             'line-height' : secondHeight + 'px'
  22.         },100);
  23.         $(this).next().stop(true, true).animate({
  24.             'width' : secondWidth + 'px',
  25.             'height' : secondHeight + 'px',
  26.             'line-height' : secondHeight + 'px'
  27.         },100);
  28.         $(this).prev().prev().stop(true, true).animate({
  29.             'width' : thirdWidth + 'px',
  30.             'height' : thirdHeight + 'px',
  31.             'line-height' : thirdHeight + 'px'
  32.         },100);
  33.         $(this).next().next().stop(true, true).animate({
  34.             'width' : thirdWidth + 'px',
  35.             'height' : thirdHeight + 'px',
  36.             'line-height' : thirdHeight + 'px'
  37.         },100);
  38.         $(this).next().next().nextAll().stop(true, true).animate({
  39.             'width' : startWidth + 'px',
  40.             'height' : startHeight + 'px',
  41.             'line-height' : startHeight + 'px'
  42.         },100);
  43.         $(this).prev().prev().prevAll().stop(true, true).animate({
  44.             'width' : startWidth + 'px',
  45.             'height' : startHeight + 'px',
  46.             'line-height' : startHeight + 'px'
  47.         },100);
  48.     });
  49. </script>

欢迎沟通交流~HTML5学堂

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

HTML5学堂

原创前端技术分享

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

原创视频课程

用心打造精品课程

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

小程序-决胜前端

前端面试题宝库

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

HTML5布局之路

非传统模式讲解前端