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

前端之家收集整理的这篇文章主要介绍了基于jquery实现百度新闻导航菜单滑动动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

仿<a href="/tag/baidu/" target="_blank" class="keywords">百度</a>新闻<a href="/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;
}

效果预览

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

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

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

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

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

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

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

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

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

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

SEOut': function (event) { /*动画定位div-hover位置到激活元素*/ } });

然后,如何知道当前激活为何元素呢,可以在点击事件时,用隐藏域或者其他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);
}
});

 /*鼠标滑出UL或者div-nav背景div-hover<a href="/tag/zidong/" target="_blank" class="keywords">自动</a>定位到激活<a href="/tag/caidan/" target="_blank" class="keywords">菜单</a>处*/
 $("ul").on({
   'mou<a href="/tag/SEO/" title="SEO">SEO</a>ut': function (event) {
     $(".div-hover").stop().animate({ width: $(".h-width").val(),left: $(".h-left").val() },150);
   }
 });

});

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

效果展示:

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

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

相关代码修改如下:

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

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

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

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

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

完整代码

仿百度新闻菜单滑动动画