无缝滚动

Posted 2020-09-26 AlexanderTheGreat

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无缝滚动相关的知识，希望对你有一定的参考价值。

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

以上是关于无缝滚动的主要内容，如果未能解决你的问题，请参考以下文章

常用JS图片滚动（无缝平滑上下左右滚动）代码大全

实现公告栏无缝滚动的js代码（转）