码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-10-30 01:58:30      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

 

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

标签:

原文地址:http://www.cnblogs.com/leigood/p/4922228.html

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