实现文字滚动效果


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>

        <script src="../zk1/js/jquery.min.js" type="text/javascript" charset="utf-8">script>
        <style type="text/css">
            #tbheadline li{
                list-style: none;
    height: 40px;
    position: relative;
    top: 10px;
    left: 10px;
    line-height: 20px;
}

#tbheadline li span{
    width: 40px;
    display: block;
    border: 1px solid red;
    border-radius: 10px;
    font-size: 13px;
    float: left;
    text-align: center;
    color: tomato;
}

#tbheadline li p{
    margin-left: 20px;
    float: left;
}

        style>
    head>
    <body>

        <ul id="tbheadline">
            <li><span>最新span> <p>巧克力热销top榜p>li>
            <li><span>双11span> <p>双11晚会我们等着你p>li>
            <li><span>热卖span> <p>2016车载充电器热卖场p>li>
            <li><span>双11span> <p>TFboys变天使飞起来了!p>li>
            <li><span>雷军span> <p>雷军问答送MAX F码!p>li>
ul>
    body>

    <script type="text/javascript">
        function textScroll(){
    $(function(){
        $('#tbheadline li').eq(1).fadeOut(100,function(){
            //   alert($(this).clone().html());
            //克隆:不用克隆的话,remove()就没了。
            $(this).clone().appendTo($(this).parent()).fadeIn(100).siblings().hide();
            $(this).remove();
        });
    });
}
setInterval('textScroll()',2000);

    script>
html>

你可能感兴趣的:(实现文字滚动效果)