H5实现中奖记录逐行滚动切换效果

最新推荐文章于 2023-03-30 16:14:38 发布

Linda L

最新推荐文章于 2023-03-30 16:14:38 发布

阅读量8.4k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/lindonglian/article/details/61619429

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

前端页面需先引入jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中奖记录跑马灯特效</title>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/recordRoll.js"></script>
    <style>
        .box{
            width: 18rem;
            height: 15rem;
            margin: auto;
            background-color: cadetblue;
        }
        .record_title{
            text-align: center;
            width: 100%;
            height: 2rem;
            margin-top: 0.2rem;
            z-index: 2;
            background-color: cadetblue;
            vertical-align: middle;
        }
        .record_list{
            height: 11rem;
            overflow: hidden;
            background-color: cadetblue;
            text-align: left;
            margin-left: 1rem;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="record_title">
        <h1>中奖记录</h1>
        </div>
        <div class="record_list">
            <p>恭喜Ivy抽中10元话费</p>
            <p>恭喜LinDL抽中100元京东E卡</p>
            <p>恭喜Mary抽中40元电影票优惠券</p>
            <p>恭喜Ivy抽中30元话费</p>
            <p>恭喜金坎抽中50元话费</p>
            <p>恭喜Ivy抽中80元话费</p>
            <p>恭喜Ivy抽中200元话费</p>
            <p>恭喜慧林抽中5000元话费</p>
            <p>恭喜张敏抽中iPhone7</p>
            <p>恭喜Ivy抽中10元话费</p>
        </div>
    </div>
</body>
<script>
    $(document.body).ready(function(){
        $(".record_list").RollTitle({line:1,speed:800,timespan:1});
    });
</script>
</html>

利用定时器实现中奖记录逐行展示
recordRoll.js

/**
 * Created by lin on 2017/3/12.
 */
(function($){
    $.fn.extend({
        RollTitle: function(opt){
            if(!opt) var opt={};
            var _this = this;
            _this.timer = null;
            _this.lineH = _this.find("p:first").height();
            _this.line=opt.line?parseInt(opt.line,15):parseInt(_this.height()/_this.lineH,10);
            _this.speed=opt.speed,
            _this.timespan=opt.timespan;
            if(_this.line==0) this.line=1;

            _this.scrollUp=function(){
                _this.animate({
                    marginTop:0
                },_this.speed,function(){
                    for(i=1;i<=_this.line;i++){
                        _this.find("p:first").appendTo(_this);
                    }
                    _this.css({marginTop:0});
                });
            }
            _this.hover(function(){
                clearInterval(_this.timer);
            },function(){
                _this.timer=setInterval(function(){_this.scrollUp();},_this.timespan);
            }).mouseout();
        }
    })
})(jQuery);