底边滑动变色的列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        ul{
            border-bottom: 2px solid #000;
            position: relative;

        }
        li{
            display: list-item;
            float: left;
            width: 100px;
            height: 30px;
            background: #ccc;
            margin-left: 20px;
        }
        .bg{
            height: 0px;
            border-bottom: 2px solid red;
            position: absolute;
            top: 30px;
            left: 0px;
        }
    </style>
</head>
<body>
    <ul class="clear">
        <li class="bg"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
</body>
</html>

CSS

reset.css

html{font-family:"微软雅黑",Arial,sans-serif}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,button,textarea,p,th,td,b,i,strong{padding:0;margin:0;font-family:Microsoft YaHei,sans-serif,Arial}
strong,b{font-weight: normal;}
fieldset,img{border:0}
a{text-decoration:none;color:#000;outline:none}
li{list-style:none}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%}
.clear:after{
  display:block; 
  content:"clear"; 
  height:0; 
  clear:both;
  visibility:hidden;
}
.clear{zoom:1;}

<script>
    window.onload=function(){
        var oul = document.getElementsByTagName("ul")[0];
        var oli = document.getElementsByTagName("li");
        var obg = oli[0];
        var flog = true;
　　　　//获取下标值 添加触发事件
        function getIndex(Eve,obj){
        for(var i = 1;i<obj.length;i++){
            obj[i].setAttribute("index",i);
            if(window.addEventListener){
            obj[i].addEventListener(Eve,function(e){
                moveTo(e.target.getAttribute("index"));
                
            },false);
            }else{
                    obj[i].attachEvent('on'+Eve,function(e){
                        moveTo(e.srcElement.index);
                });
            }
        }
        }
        getIndex('mouseover',oli);
　　　　　//根据下标值移动
        function moveTo(index){
            var end = (index-1)*120;
            var start = getDefaultStyle(obg,"left");
            var step = (end-start)/10;
                console.log(time);
                if(flog){
                    flog = false;
                    var time = setInterval(function(){
                    start+=step;
                    console.log("start="+start);
                    obg.style.left=start+"px";
                    if(start == end){
                        clearInterval(time);
                        flog = true;
                        }
                    },10)    
                }        
            }
        //console.log(getDefaultStyle(obg,"left"));
        function getDefaultStyle(obj,attribute){  
        return  parseFloat(obj.currentStyle?obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj,false)[attribute]);    
        } //获取css元素的属性值；
    }
        
    </script>