文字的向上滚动

.gundong{
                height: 50px;
                overflow: hidden;
            }
            .gundong ul{
                list-style: none;
                width: 100%;
                display: block;
                height: 50px;
            }
            .gundong ul li{
                height: 50px;
                background: bisque;
                line-height: 50px;
            }

 

<div class="gundong">
            <ul>
                <li>dfh</li>
                <li>dfhdif</li>
                <li>feuif</li>
                <li>fhur</li>
                <li>fhuerfye</li>
                <li>ewrope</li>
                <li>pdfo</li>
            </ul>
        </div>

 

setInterval(function(){
                if(!$('.gundong ul').is(':animated')){
                    var hei =$('.gundong ul li').height();
                    var len = $('.gundong ul li').length;
                    var heilen = hei*len;
                    var whei = hei;
                    var mar1= parseInt($('.gundong ul').css('margin-top'));
                    var endmar = (parseInt((heilen/whei)-1)*whei);
                    if(mar1<=-endmar){
                        $('.gundong ul').animate({marginTop:'0px'},300)
                    }else{
                        $('.gundong ul').animate({marginTop:mar1-whei+'px'},300)
                    }
                }
            },3000)

posted @ 2017-08-03 10:58  i'mpossible  阅读(128)  评论(0编辑  收藏  举报