实现文字滚动效果

最新推荐文章于 2022-08-23 13:56:27 发布

爱AJ的范思哲

最新推荐文章于 2022-08-23 13:56:27 发布

阅读量293

点赞数

<!DOCTYPE html>
<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>双11</span> <p>双11晚会我们等着你</p></li>
            <li><span>热卖</span> <p>2016车载充电器热卖场</p></li>
            <li><span>双11</span> <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>

爱AJ的范思哲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现文字滚动效果

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="../zk1/js/jquery.min.js" type=&quo
复制链接

扫一扫