jQuery跳跃性的无缝滚动

最新推荐文章于 2021-06-19 23:35:42 发布

含笑一过

最新推荐文章于 2021-06-19 23:35:42 发布

阅读量826

点赞数

分类专栏：前端文章标签：无缝滚动

本文链接：https://blog.csdn.net/u013630488/article/details/49679975

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

                                        **jQuery跳跃性的无缝滚动**

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery跳跃性的无缝滚动</title>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <style type="text/css">
    body{margin: 0;padding: 0;}
    ul li{list-style: none;}
    .content{width: 1000px;overflow: hidden;margin: 30px auto;position: relative;}
    h1{text-align: center;}
    #scroll_list{height: 248px;overflow: hidden;text-align: center;}
    #scroll_list li{line-height: 30px; animation:1s ease; position: relative; height: 30px; font-size: 12px; }
    </style>
</head>
<body>
    <div class="content">
        <h1>获奖名单</h1>
        <hr>
        <ul id="scroll_list">
            <li>恭喜张三获得50元红包</li>
            <li>恭喜李四获得50元红包</li>
            <li>恭喜王五获得50元红包</li>
            <li>恭喜马六获得50元红包</li>
            <li>恭喜公孙获得50元红包</li>
        </ul>       
    </div>
<script type="text/javascript">
function scroll_news(){
    $(function(){
        $('#scroll_list li').eq(0).delay(1000).animate({height:'0px'},function(){
            $(this).clone().appendTo($(this).parent()).show(0).css('height','30px');
            $(this).remove();
        });
     });
}
setInterval('scroll_news()',1000);
//每隔1000毫秒触发一次scroll_news函数
</script>   
</body>
</html>