每天实现一个小特效：百度新闻导航栏特效

百度新闻导航栏如下图所示

 由于不会弄成动图，只能贴一下静态的图片了，大家可以打开百度新闻看一下，抱歉。

HTML代码如下：

<ul> <div class="move"></div> <li>首页</li> <li>国内</li> <li>互联网</li> <li class="active">财经</li> <li>体育</li> <li>汽车</li> </ul>

CSS代码如下：

*{ padding: 0; margin: 0; } ul{ margin: 200px auto; list-style: none; background: #01204f; width: 1000px; height: 40px; position: relative; } ul li{ color: #fff; line-height: 40px; padding-left: 6px; padding-right: 6px; cursor: pointer; transition: background ease .6s; position: relative; box-sizing: border-box; display: inline-block; margin-left: -5px; } li:nth-child(2){ margin-left: 0; } .active{ background-color: #c00; } .move{ background-color: #c00; width: 44px; height: 40px; position: absolute; top: 0; transition: all ease 0.6s; overflow: hidden; }

JavaScript代码如下：

var ul = document.getElementsByTagName("ul")[0]; var li = document.getElementsByTagName("li"); var active = document.getElementsByClassName("active")[0]; var move = document.getElementsByClassName("move")[0]; var activeLeft = active.offsetLeft + "px"; move.style.left = activeLeft; for(var i=0;i<li.length;i++){ //鼠标移入 li[i].onmouseover = (function(k){ return function(){ move.style.width = li[k].clientWidth + "px"; move.style.left = li[k].offsetLeft + "px"; } })(i); //鼠标移出 li[i].onmouseout = function(){ move.style.width = active.clientWidth + "px"; move.style.left = activeLeft; } } ul.onmouseout = function(){ move.style.width = active.clientWidth + "px"; move.style.left = activeLeft; }