前言
前两天，群里有人问百度新闻导航是如何实现的，当时由于忙于工作，没有来得及细看，恰好今天有空闲时间，索性就实现一下这个效果吧；
思路与步骤
1.利用UL创建简单横向导航；
仿百度新闻菜单滑动动画 body, div, ul, li, a { margin padding font-size color border .div-nav-container { margin-top width background-color .div-nav { width margin ul { list-style width height ul li { float ul li a { line-height display padding text-align text-decoration网站首页热点国际新闻国内新闻国家政策体育新闻娱乐新闻名人古迹
2.添加一个脱离层的div,命名div-hover，用于菜单滑动动画，设置CSS样式；
.div-hover { background-color left top width ...
3.添加菜单项的滑动事件，计算div-hover的滑动要素，左，上边距以及宽度；
实现代码
; ; $(document).ready(function () { $().on({ () { SetDivHoverWidthAndLeft(this); ); } }); }); function SetDivHoverWidthAndLeft(element) { divHoverLeft = GetLeft(element); aWidth = GetWidth(element); } GetWidth(ele) { return $(ele).parent().width(); } GetLeft(element) { $(element).parent().prevAll(); ; (index, ele) { left += $(ele).width(); }); return left; }
效果预览
从预览效果可以看出，div-hover的定位是有问题的，div-hover应该以父级元素绝对定位，所以修改代码（注释部分为修改点）如下：
.div-nav { width margin position .div-hover { background-color height left top width position
虽然解决了定位问题，但是背景图片还是浮于文字上方，所以调整代码，将文字浮动于红色div之上：
ul li { float position z-index
效果预览
4.添加菜单点击，以及加载页面默认菜单选中；
.active { background-color; ; $(document).ready(function () { $().on({ () { SetDivHoverWidthAndLeft(this); ); }, () { SetDivHoverWidthAndLeft(this); ).removeClass(); ); } }); }); 网站首页…………
效果预览
5.添加鼠标移出范围，自动定位当前激活元素功能；
在做此功能之前，先理下思路，鼠标移出操作，我们可以想到mouseout,mouseleave事件，那么随之就会有以下几个疑问：
①这地方选用哪个事件可以满足这个条件呢？
②那选择的事件又定位在哪个元素呢？
③移出鼠标之后又如何知道当前激活的是哪个元素呢？
④如何知道div-hover的左边距和width等值呢？
实践出真知，那就实践一下：
首先，以mouseout为例，第一个问题自然就解决了；
其次，事件定位在哪个元素？通过上面GIF图，分析，如果定位在A标签或Li标签，那么鼠标移出操作在A标签或Li标签之间切换也会触发自动定位到激活元素（假设自动定位已做），就会出现如下图所示情况：
所以不能定位在A或Li标签上，再想一下，鼠标应该是移出整个导航的范围才可以，那么定位在哪个元素就很容易出来了，应该定位在UL或者UL的父级元素，他们两个的大小范围均是一致的，所以两个元素均可以，若两个元素大小不一致，就应该定位在UL上面了。于是就有了类似如下代码：
$("ul").on({ 'mouseout': function (event) { /*动画定位div-hover位置到激活元素*/ } });
相关文章
精彩导读
热门资讯
关注我们
