45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:如何通过基于jquery实现百度新闻导航菜单滑动动画?

如何通过基于jquery实现百度新闻导航菜单滑动动画?

2016-03-27 09:15:19 来源:www.45fan.com 【

如何通过基于jquery实现百度新闻导航菜单滑动动画?

本文实例为大家分享jquery实现百度新闻导航菜单滑动动画,供大家参考,具体内容如下

思路与步骤
1.利用UL创建简单横向导航;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>仿百度新闻菜单滑动动画</title>
 <style type="text/css">
  body, div, ul, li, a
  {
   margin: 0px;
   padding: 0px;
   font-size: 20px;
   color: #FFF;
   border: 0;
  }
  .div-nav-container
  {
   margin-top: 50px;
   width: 100%;
   background-color: #01204F;
  }
  .div-nav
  {
   width: 870px;
   margin: 0px auto;
  }
  ul
  {
   list-style: outside none none;
   width: 100%;
   height: 50px;
  }
  ul li
  {
   float: left;
  }
  ul li a
  {
   line-height: 50px;
   display: block;
   padding: 0px 15px;
   text-align: center;
   text-decoration: none;
  }
 </style>
</head>
<body>
 <div class="div-nav-container">
  <div class="div-nav">
   <ul>
    <li><a href="javascript:void(0)">网站首页</a></li>
    <li><a href="javascript:void(0)">热点</a> </li>
    <li><a href="javascript:void(0)">国际新闻</a> </li>
    <li><a href="javascript:void(0)">国内新闻</a> </li>
    <li><a href="javascript:void(0)">国家政策</a> </li>
    <li><a href="javascript:void(0)">体育新闻</a> </li>
    <li><a href="javascript:void(0)">娱乐新闻</a> </li>
    <li><a href="javascript:void(0)">名人</a> </li>
    <li><a href="javascript:void(0)">古迹</a> </li>
   </ul>
  </div>
 </div>
</body>
</html>

2.添加一个脱离层的div,命名div-hover,用于菜单滑动动画,设置CSS样式;

<style type="text/css">
 .div-hover
 {
  background-color: Red;height: 50px;
  left: 0px;
  top: 0px;
  width: 0px;
 }
</style>
<div class="div-nav">
  <!--添加滑动背景-->
  <div class="div-hover">
  </div>
  <ul>
   ...
  </ul>
</div>

3.添加菜单项的滑动事件,计算div-hover的滑动要素,左,上边距以及宽度;

<script type="text/javascript">
 var divHoverLeft = 0;
 var aWidth = 0;

 $(document).ready(function () {
  $("a").on({
   'mouseover': function () {
    SetDivHoverWidthAndLeft(this);
    //设置滑动动画
    $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
   }
  });
 });

 function SetDivHoverWidthAndLeft(element) {
  divHoverLeft = GetLeft(element);
  aWidth = GetWidth(element);
 }

 //获得Li宽度
 function GetWidth(ele) {
  return $(ele).parent().width();
 }

 //获得div-hover左边距
 function GetLeft(element) {
  //获得li之前的同级li元素
  var menuList = $(element).parent().prevAll();
  var left = 0;
  //计算背景遮罩左边距
  $.each(menuList, function (index, ele) {
  left += $(ele).width();
  });
  return left;
 }
</script>

效果预览

如何通过基于jquery实现百度新闻导航菜单滑动动画?

从预览效果可以看出,div-hover的定位是有问题的,div-hover应该以父级元素绝对定位,所以修改代码(注释部分为修改点)如下:

<style type="text/css">
 .div-nav
 {
  width: 870px;
  margin: 0px auto;
  /*作为div-hover的父元素定位参照*/
  position: relative;
 }
 .div-hover
 {
  background-color: Red;
  height: 50px;
  left: 0px;
  top: 0px;
  width: 0px;
  /*以父元素绝对定位*/
  position: absolute;
 }
</style>

如何通过基于jquery实现百度新闻导航菜单滑动动画?

虽然解决了定位问题,但是背景图片还是浮于文字上方,所以调整代码,将文字浮动于红色div之上:

<style type="text/css">
 ul li
 {
  float: left; 
  /*****Start(作用:导航文字浮于div-hover红色之上)*******/
  position: relative;
  z-index: 4; 
  /*********************End*************************/
 }
</style>

效果预览

如何通过基于jquery实现百度新闻导航菜单滑动动画?

4.添加菜单点击,以及加载页面默认菜单选中;

<style type="text/css">
 /**设置菜单激活***/
 .active
 {
  background-color: Red;
 }
</style>
<script type="text/javascript">
 var divHoverLeft = 0;
 var aWidth = 0;

 $(document).ready(function () {
  $("a").on({
   'mouseover': function () {
    SetDivHoverWidthAndLeft(this);
    //设置滑动动画
    $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
   },
   /*添加点击事件*/
   'click': function () {
    SetDivHoverWidthAndLeft(this);
    //清除所有a标签class
    $('a').removeClass();
    //设置当前点击菜单为激活状态
    $(this).addClass('active');
   }
  });
 });
</script>
</head>
<body>
 <div class="div-nav-container">
  <div class="div-nav">
   <!--添加滑动背景-->
   <div class="div-hover">
   </div>
   <ul>
    <--默认菜单激活--> 
    <li><a class="active" href="javascript:void(0)">网站首页</a></li>
    …………
   </ul>
  </div>
 </div>
</body>
</html>

效果预览

如何通过基于jquery实现百度新闻导航菜单滑动动画?

5.添加鼠标移出范围,自动定位当前激活元素功能;

在做此功能之前,先理下思路,鼠标移出操作,我们可以想到mouseout,mouseleave事件,那么随之就会有以下几个疑问:

①这地方选用哪个事件可以满足这个条件呢?

②那选择的事件又定位在哪个元素呢?

③移出鼠标之后又如何知道当前激活的是哪个元素呢?

④如何知道div-hover的左边距和width等值呢?

实践出真知,那就实践一下:

首先,以mouseout为例,第一个问题自然就解决了;

其次,事件定位在哪个元素?通过上面GIF图,分析,如果定位在A标签或Li标签,那么鼠标移出操作在A标签或Li标签之间切换也会触发自动定位到激活元素(假设自动定位已做),就会出现如下图所示情况:

如何通过基于jquery实现百度新闻导航菜单滑动动画?

所以不能定位在A或Li标签上,再想一下,鼠标应该是移出整个导航的范围才可以,那么定位在哪个元素就很容易出来了,应该定位在UL或者UL的父级元素,他们两个的大小范围均是一致的,所以两个元素均可以,若两个元素大小不一致,就应该定位在UL上面了。于是就有了类似如下代码:

$("ul").on({
  'mouseout': function (event) {
   /*动画定位div-hover位置到激活元素*/
  }
});

然后,如何知道当前激活为何元素呢,可以在点击事件时,用隐藏域或者其他display方式存储当前点击的元素宽度和左边距,待鼠标移出操作,重新读取存储的数据,进而进行animate定位;从而解决以上③④问题;部分代码如下:

(当然,想知道菜单激活元素,也可以用class为active的方式来查找,不过这种方式,相对来说麻烦一些,首先获得active的元素,然后通过遍历li,重新计算一遍宽度和左边距,最后进行赋值和添加滑动定位;此处暂用隐藏域方式处理,原因是方便简单,群友如有兴趣可以用active方式试验)

<script type="text/javascript">
  var divHoverLeft = 0;
  var aWidth = 0;

  $(document).ready(function () {
  //菜单滑动动画
   $("a").on({
    'mouseover': function () {
     SetDivHoverWidthAndLeft(this);
     //设置滑动动画
     $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
    }
'click': function () {
     SetDivHoverWidthAndLeft(this);
     //清除所有a标签class
     $('a').removeClass();
     //设置当前点击菜单为激活状态
     $(this).addClass('active');
     $(".h-width").val(aWidth);
     $(".h-left").val(divHoverLeft);
    }
   });

   /*鼠标滑出UL或者div-nav背景div-hover自动定位到激活菜单处*/
   $("ul").on({
    'mouseout': function (event) {
     $(".div-hover").stop().animate({ width: $(".h-width").val(), left: $(".h-left").val() }, 150);
    }
   });
 });

 function SetDivHoverWidthAndLeft(element) {
  divHoverLeft = GetLeft(element);
  aWidth = GetWidth(element);
 }
 ............
 </script>
</head>
<body>
 <div class="div-nav-container">
  <div class="div-nav">
   <!--添加滑动背景-->
   <div class="div-hover">
   </div>
   <ul>
    <li><a class="active" href="javascript:void(0)">网站首页</a></li>
    ...........
   </ul>
  </div>
 </div>
 <input type="hidden" class="h-width" value="110" />
 <input type="hidden" class="h-left" value="0" />
</body>
</html>

效果展示:

如何通过基于jquery实现百度新闻导航菜单滑动动画?

看图发现依旧出现之前类似定位在A或Li的问题,出现这种情况的原因:

jquery中mouseout如果定位在一个元素上,例如div,那么此div之下的元素都会具有mouseout事件,也就是常说的,事件冒泡机制;与此类似的事件如mousedown,mouseover等,那么是不是阻止事件冒泡就行了呢? 理论上是这样的。通常阻止冒泡有两种方式: event.stopPropagation();和return false;当然他们之间也是有区别的。

相关代码修改如下:

<script type="text/javascript">

  ..........

  $(document).ready(function () {
 
   /*鼠标滑出UL或者div-nav背景div-hover自动定位到激活菜单处*/
   $("ul").on({
    'mouseout': function (event) {
     $(".div-hover").stop().animate({ width: $(".h-width").val(), left: $(".h-left").val() }, 150);
     /**阻止冒泡**/
     event.stopPropagation();
     //return false;
    }
   });
  });

  .......
</script>

无论何种阻止方式,都没有卵用,依旧阻止不了冒泡,效果可想而知,与上面Gif图所示无异;

由此证明,mouseover在实现此功能方面是有问题的;

那换mouseleave呢,除了将mouseover修改为mouseleave和去除冒泡代码外,其他代码不做改动,实验效果如下:

如何通过基于jquery实现百度新闻导航菜单滑动动画?

从上图可以看出,效果与百度新闻导航滑动基本无异,至此大功告成;

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>仿百度新闻菜单滑动动画</title>
 <style type="text/css">
  body, div, ul, li, a
  {
   margin: 0px;
   padding: 0px;
   font-size: 20px;
   color: #FFF;
   border: 0;
  }
  .div-nav-container
  {
   margin-top: 50px;
   width: 100%;
   background-color: #01204F;
  }
  .div-nav
  {
   /*作为div-hover的父元素定位参照*/
   position: relative;
   width: 870px;
   margin: 0px auto;
  }
  .div-hover
  {
   background-color: Red;
   /*以父元素绝对定位*/
   position: absolute;
   height: 50px;
   left: 0px;
   top: 0px;
   width: 0px;
  }
  ul
  {
   list-style: outside none none;
   width: 100%;
   height: 50px;
  }
  ul li
  {
   float: left;
   /*****Start(作用:导航文字浮于div-hover红色之上)*******/
   position: relative;
   z-index: 4;
   /*********************End*************************/
  }
  ul li a
  {
   line-height: 50px;
   display: block;
   padding: 0px 15px;
   text-align: center;
   text-decoration: none;
  }
  /**设置菜单激活***/
  .active
  {
   background-color: Red;
  }
 </style>
 <script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
 <script type="text/javascript">

  var divHoverLeft = 0;
  var aWidth = 0;

  $(document).ready(function () {
   //菜单滑动动画
   $("a").on({
     /*此处用mouseover或者mouseenter均可,如果以后要为X标签同时添加悬停和移出事件,建议用enter和leave也就是传说中的hover事件,因为里面事件冒泡已经处理过,就不会出现类似over和out之类的情况了*/
    'mouseenter': function () {
     SetDivHoverWidthAndLeft(this);
     //设置滑动动画
      $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
    },
    'click': function () {
     SetDivHoverWidthAndLeft(this);
     //清除所有a标签class
     $('a').removeClass();
     //设置当前点击菜单为激活状态
     $(this).addClass('active');

     $(".h-width").val(aWidth);
     $(".h-left").val(divHoverLeft);
    }
   });

   /*鼠标滑出UL或者div-nav背景div-hover自动定位到激活菜单处*/
   //mouseleave事件定位到ul或者div-nav均可
   $("ul").on({
    'mouseleave': function (event) {
     $(".div-hover").stop().animate({ width: $(".h-width").val(), left: $(".h-left").val() }, 150);
    }
   });
  });

  function SetDivHoverWidthAndLeft(element) {
   divHoverLeft = GetLeft(element);
   aWidth = GetWidth(element);
  }

  //获得Li宽度
  function GetWidth(ele) {
   return $(ele).parent().width();
  }

  //获得div-hover左边距
  function GetLeft(element) {
   //获得li之前的同级li元素
   var menuList = $(element).parent().prevAll();
   var left = 0;
   //计算背景遮罩左边距
   $.each(menuList, function (index, ele) {
    left += $(ele).width();
   });
   return left;
  }
 </script>
</head>
<body>
 <div class="div-nav-container">
  <div class="div-nav">
   <!--添加滑动背景-->
   <div class="div-hover">
   </div>
   <ul>
    <li><a class="active" href="javascript:void(0)">网站首页</a></li>
    <li><a href="javascript:void(0)">热点</a> </li>
    <li><a href="javascript:void(0)">国际新闻</a> </li>
    <li><a href="javascript:void(0)">国内新闻</a> </li>
    <li><a href="javascript:void(0)">国家政策</a> </li>
    <li><a href="javascript:void(0)">体育新闻</a> </li>
    <li><a href="javascript:void(0)">娱乐新闻</a> </li>
    <li><a href="javascript:void(0)">名人</a> </li>
    <li><a href="javascript:void(0)">古迹</a> </li>
   </ul>
  </div>
 </div>
 <input type="hidden" class="h-width" value="110" />
 <input type="hidden" class="h-left" value="0" />
</body>
</html>

总结和关键点
1.背景滑动由某个块状元素(此处用的div)来实现,而非本元素的hover改变背景颜色;

2.注意元素定位(滑动块状元素以谁来绝对定位或者相对定位,左边距的计算和自身宽度的计算;滑动块状元素div-hover和li之间的相对定位,以及层级大小);

3.滑动动画事件animate和记录激活菜单,鼠标移出区域自定定位到激活菜单;

4.jquery中mouseover,mouseout以及mouseenter,mouseleave关于冒泡机制的区别;(前两个未做冒泡机制的限制,后两个冒泡已经经过处理,事件只针对注册元素本身,而不会对子元素起作用,mouseenter和mouseleave用在一个元素标签上可以用hover事件代替,本身hover就是这两者的封装,如果事件在不同元素标签上,最好分开调用mouseenter和mouseleave事件)

5.所有关键点以及作用都已经在代码各处加上注释,各位可以看看。

希望本文对大家学习jquery程序设计有所帮助。


本文地址:http://www.45fan.com/bcdm/43824.html
Tags: 实现 jquery 基于
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部