码迷,mamicode.com
首页 > 其他好文 > 详细

文字小轮播

时间:2018-05-18 00:31:22      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:奇葩   pac   top   document   height   ase   UNC   idt   div   


<
div class="serch2_lb"> <ul id="ser_xlb" id="ser_xlb"> <li><a href="#">女子三米板夺金银</a></li> <li><a href="#">罗切特遭持枪抢劫</a></li> <li><a href="#">少林寺办传灯大典</a></li> <li><a href="#">周杰伦青蜂车败诉</a></li> <li><a href="#">南京男孩咸猪手</a></li> <li><a href="#">夫妻生活奇葩公证</a></li> <li><a href="#">菲律宾总统拒道歉</a></li> <li><a href="#">石川佳纯赞马龙</a></li> <li><a href="#">刘嘉玲讽谢娜</a></li> <li><a href="#">周海媚与男友分手</a></li> <li><a href="#">女子三米板夺金银</a></li> </ul> </div>

js部分

var ser_xlb=document.getElementById(‘ser_xlb‘);
    var nowPosition;
    var num=1;
    setInterval(function(){
        bbo();
    },1000)

    function bbo(){
        if (num==10){
            $(ser_xlb).animate({"marginLeft": ((-num) * 154) + "px"},"slow",function(){
                ser_xlb.style.marginLeft=0;
                num=1;
            });
        }else{
            $(ser_xlb).animate({"marginLeft": ((-num) * 154) + "px"});
        num++;
        }
        
    }

css

*{
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;
}
.serch2_lb{
    width: 154px;
    height: 16px;
    background: #C1D8F0;
    line-height: 16px;
    overflow: hidden;
    position: relative;
    margin-top: 1px;
    display: inline-block;
    /*_top:0;
    _left:0;*/
}
#ser_xlb{
    width: 1694px;
    height: 16px;
}
#ser_xlb li{
    float: left;
    width: 154px;
    height: 16px;
    overflow: hidden;

}
#ser_xlb li a{
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    vertical-align: baseline;
    display: inline-block;
    width: 154px;
    /*overflow: hidden;*/
}

 

文字小轮播

标签:奇葩   pac   top   document   height   ase   UNC   idt   div   

原文地址:https://www.cnblogs.com/xiaxiani/p/9053899.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!