首页 > 其他 > 详细

模仿qq音乐播放字母效果

时间:2014-03-10 04:35:16      阅读:548      评论:0      收藏:0      [点我收藏+]

html

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

</div>
bubuko.com,布布扣

css

bubuko.com,布布扣
*{ 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;}
bubuko.com,布布扣

js

bubuko.com,布布扣
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);
        }
    
    }
bubuko.com,布布扣

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

模仿qq音乐播放字母效果,布布扣,bubuko.com

模仿qq音乐播放字母效果

原文:http://www.cnblogs.com/xiaotian747/p/3590528.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!