jquery实现名单滚动

最新推荐文章于 2023-02-28 17:56:48 发布

weixin_30596343

最新推荐文章于 2023-02-28 17:56:48 发布

阅读量149

点赞数

原文链接：http://www.cnblogs.com/jr1260/p/6484326.html

版权

转：http://www.qdfuns.com/notes/25341/917d9cb031f835a086dd445b77b6e04e.html

介绍：
记录滚动特效。
就是那一排文字不停地滚啊滚啊滚得特效，在抽奖活动结果显示啦、报名结果显示上用的非常频繁。当年总是希望在抽奖结果面板上看到自己的名字，然而二十几年了都没见过一次2333，这个活动特效可以让结果显示看起来更加灵动，接下来我就说一下这个特效得实现方法。

思路：
-用一个div包裹住ul，并设置溢出外层div 的都隐藏（overflow为hidden）；
-设置他们为相对定位，用top值来控制ul向上移动；
-每次向上移动一个li的高度后，将第一个li插入到列表最后端。
-这样就可以使记录不断向上移动，制造列表滚动的效果。
（PS：这里使用的是模拟数据，在真实应用场景中，可用Ajax获取后端真实数据再插入DOM中。）

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>记录滚动</title>

    <style>
    .panel{
        width:340px;
        padding:10px;
        text-align: center;
        background-color:#FF3C3C;
        border-radius: 0 0 8px 8px;
     }
    h2{
        color:#fff;
        margin: 5px;
    }
    .activity{
        width: 300px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        height: 165px;
        background-color: #fff;
        border-radius: 5px;
    }
    .activity ul{
        top: -15px;
        padding: 0;
        color: #666;
        position: relative;
    }
    .activity li{
        height: 34px;
               padding:0;
        font-size: 12px;
        line-height: 34px;
                list-style: none;
        border-bottom: 1px dotted #d2d2d2;
    }
    </style>
    </head>
    
    <body>
      <div class="panel">
        <h2>活动动态</h2>
        <div class="activity" id="J_Activity">
            <ul>
                <li>user1 获得了7折优惠券</li>
                <li>user2 获得了8折优惠券</li>
                <li>user3 获得了7折优惠券</li>
                <li>user4 获得了5折优惠券</li>
                <li>user5 获得了4折优惠券</li>
            </ul>
        </div>
      </div>
    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(function () {
        var listPanel = $('#J_Activity ul');
        var z = 0;//向上滚动top值
        function up() {//向上滚动
            listPanel.animate({//中奖结果
                'top': (z - 35) + 'px'
            }, 1500, 'linear', function () {
                listPanel.css({'top': '0px'})
                .find("li:first").appendTo(listPanel);
                up();
            });
        }
        up();
    });
    </script>
</html>