<!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="https://www.jb51.net/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> <div> <!--添加滑动背景--> <div> </div> <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> <input type="hidden" value="110" /> <input type="hidden" 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.所有关键点以及作用都已经在代码各处加上注释，各位可以看看。