无缝滚动 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="css/scroll.css" />
</head>
<body>
<ul id="express">
    <li><span>【特惠】</span><a href="#">掬一轮明月 表无尽惦念</a></li>
    <li><span>【公告】</span><a href="#">好奇金装成长裤新品上市</a></li>
    <li><span>【特惠】</span><a href="#">大牌闪购 · 抢！</a></li>
    <li><span>【公告】</span><a href="#">发福利 买车就抢千元油卡</a></li>
    <li><span>【公告】</span><a href="#">家电低至五折</a></li>
    <li><span>【特惠】</span><a href="#">掬一轮明月 表无尽惦念</a></li>
    <li><span>【公告】</span><a href="#">好奇金装成长裤新品上市</a></li>
    <li><span>【特惠】</span><a href="#">大牌闪购 · 抢！</a></li>
    <li><span>【公告】</span><a href="#">发福利 买车就抢千元油卡</a></li>
    <li><span>【公告】</span><a href="#">家电低至五折</a></li>
</ul>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        function movedown(){
            var marginTop = 0 ;
            var stop =false;
            var interval = setInterval(function(){
                if(stop) return;
                $('#express').children('li').first().animate({
                            'margin-top':marginTop--},
                        0,
                        function(){
                            var $first =$(this);
                            if(!$first.is(':animated')){
                                if((-marginTop)>$first.height()){
                                    $first.css({'margin-top':0}).appendTo($('#express'));
                                    marginTop = 0;
                                }
                            }
                        });
            },50);
            $('#express').mouseover(function(){
                stop = true;
            }).mouseout(function(){
                stop = false;
            });
        }
        movedown();
    });
</script>
</body>
</html>
*{
    padding:0px;
    margin:0px;
}
a {
    color: #555555;
    text-decoration: none;
}
a:hover {
    color: #ff4e00;
}
ul{
    padding:10px;
    height:146px;
    width:250px;
    border:1px solid black;
    overflow: hidden;
}
li{
    font-size:14px;
}

 

posted @ 2017-07-06 11:35  AlexanderTheGreat  阅读(121)  评论(0)    收藏  举报