基于jquery实现百度新闻导航菜单滑动动画

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

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

仿<a href="https://www.f2er.com/tag/baidu/" target="_blank" class="keywords">百度</a>新闻<a href="https://www.f2er.com/tag/caidan/" target="_blank" class="keywords">菜单</a>滑动动画

...

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

<div class="jb51code">
<pre class="brush:js;">
<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;
}

效果预览

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

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

效果预览

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

<div class="jb51code">
<pre class="brush:xhtml;">
<style type="text/css">
/**设置菜单激活***/
.active
{
background-color: Red;
}

…………

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

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

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

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

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

<div class="jb51code">
<pre class="brush:xhtml;">
<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,150);
}
'click': function () {
SetDivHoverWidthAndLeft(this);
//清除所有a标签class
$('a').removeClass();
//设置当前点击菜单为激活状态
$(this).addClass('active');
$(".h-width").val(aWidth);
$(".h-left").val(divHoverLeft);
}
});

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