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

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

; ; $(document).ready(function () { ).on({ () { SetDivHoverWidthAndLeft(this); ); } () { SetDivHoverWidthAndLeft(this); ).removeClass(); ); $().val(aWidth); $().val(divHoverLeft); } }); $().on({ (event) { $(); } }); }); 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 () { $().on({ (event) { $(); event.stopPropagation(); //return false; } }); }); .......

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

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

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

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

完整代码

仿百度新闻菜单滑动动画 body, div, ul, li, a { margin padding font-size color border .div-nav-container { margin-top width background-color .div-nav position width margin .div-hover { background-color position height left top width ul { list-style width height ul li { float position z-index ul li a { line-height display padding text-align text-decoration .active { background-color; ; $(document).ready(function () { /*此处用mouseover或者mouseenter均可，如果以后要为X标签同时添加悬停和移出事件，建议用enter和leave也就是传说中的hover事件，因为里面事件冒泡已经处理过，就不会出现类似over和out之类的情况了*/ () { SetDivHoverWidthAndLeft(this); ); }, () { SetDivHoverWidthAndLeft(this); ).removeClass(); ); $().val(aWidth); $().val(divHoverLeft); } }); ).on({ (event) { $(); } }); }); 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; } 网站首页热点国际新闻国内新闻国家政策体育新闻娱乐新闻名人古迹

总结和关键点

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

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

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