夺命雷公狗jquery---43滚动公告栏案例 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            h1,div{
                margin:0;
                padding:0;
                font-size:12px;
            }

            h1{
                width:180px;
                height:30px;
                background-color:#369;
                line-height:30px;
                text-indent:10px;
                color:yellow;
                font-size:14px;
                font-weight:bold;
                padding:0;
                margin:0;
            }

            div{
                width:158px;
                height:200px;
                padding:10px;
                border:1px solid #369;
            }

            li{
                list-style: none;
                padding:3px;
                border-bottom:1px dashed #ccc;
            }
            ul{
                padding:0;
                margin:0;
            }

        </style>
        <script src="js/jquery.js"></script>
        <script>
            $(function(){
                //setInterval让他循环
                setInterval(function(){
                    $('ul>li:first').clone().appendTo('ul');
                    $('ul>li:first').remove();
                },1000);
            });
        </script>
    </head>
    <body>
        <h1>Jquery滚动效果</h1>
        <div>
            <ul>
                <li>苹果特价</li>
                <li>西瓜特价</li>
                <li>香蕉特价</li>
                <li>雪梨特价</li>
                <li>哈密瓜特价</li>
                <li>葡萄特价</li>
                <li>提子特价</li>
                <li>桔子特价</li>
                <li>橙子特价</li>
            </ul>
        </div>
    </body>
</html>

 

posted @ 2015-10-30 00:47  夺命雷公狗  阅读(183)  评论(0)  编辑  收藏  举报