模仿qq音乐播放字母效果

html

<div class="cont">
<ul class="cont_ul" id="cont_ul">
    <li>细雨落入初春的清晨悄悄唤醒枝芽</li>
    <li>手心忽然长出纠缠的曲线</li>
    <li>懂事之前 情动以后</li>
    <li>长不过一天</li>
    <li>留不住 算不出 流年</li>
</ul>

</div>

css

*{ margin:0; padding:0;}
ul,li { list-style:none;}
.cont_ul { width:500px; position:relative;}
.cont_ul  li {position:absolute; }
.cont_ul  li  .copy_li { color:#ff0000; position:absolute; overflow:hidden;  left:0px ; top:0px;  height:18px;}

js

var contUl = document.getElementById("cont_ul");
var li = contUl.getElementsByTagName("li");
var num = 0 ; 

window.onload = function (){
    for(var i =0; i<li.length ;i++){
        li[i].style.top =  i*30+"px";
        }
    init(num);
    }

 function init(e){
    var copyLi = li[e].cloneNode(true);
    copyLi.className = "copy_li";
    li[e].appendChild(copyLi);
    var copyList = li[e].getElementsByTagName("li")[0];
    copyList.style.top = "0px";
    copyList.style.width = "0px";
    goTo(e,copyList);
    
    }


function goTo(numb,copyList){
    this.numb = numb;
    this.copyList = copyList ;
    
    copyList.style.width = parseInt(copyList.clientWidth)+10+"px";
    time = setTimeout( "goTo(this.numb,this.copyList)",100);
    var liWidth =parseInt( li[numb].clientWidth)+20 ;
    //console.log(liWidth);
    if(parseInt(copyList.clientWidth)>liWidth){
        //copyList.removeAttribute("style");
        li[numb].removeChild(copyList);
        clearTimeout(time);
        num++ ;
        
        if(num ==(li.length)){
            return ;
            }
        init(num);
        }
    
    }

此效果只在ie10 和 谷歌浏览器上测试过。