跑馬燈抽獎(jiǎng)動(dòng)畫(huà)代碼

工作中用到了跑道燈抽獎(jiǎng)動(dòng)畫(huà)齿穗，之前模仿的同事寫(xiě)的，總感覺(jué)不是很好喊括，昨天百度了下然后看到不錯(cuò)的胧瓜，自己試著寫(xiě)了下，最后兩圈減速的判斷條件寫(xiě)的不好郑什，我理想的應(yīng)該是府喳，快要接近中獎(jiǎng)位置的最后 8 個(gè)過(guò)渡動(dòng)畫(huà)是減速的，而現(xiàn)在是第 5 圈就開(kāi)始減速蘑拯，如果中獎(jiǎng)位置是 7 那就減速了整整 2 圈钝满，自我感覺(jué)不太好

html

<section>
    <ul class="lottery-box" id="lotteryUl">
        <li class="li li-0">
            <div class="up"><span class="yuan">￥</span>1</div>
            <div class="down">電影票紅包</div>
        </li>
        <li class="li li-1">
            <div class="up"><span class="yuan">￥</span>1000</div>
            <div class="down">觀影套餐</div>
        </li>
        <li class="li li-2">
            <div class="up"><span class="yuan">￥</span>5</div>
            <div class="down">景點(diǎn)紅包</div>
        </li>
        <li class="li li-7">
            <div class="up"><span class="yuan">￥</span>5</div>
            <div class="down">電影票紅包</div>
        </li>
        <li>
            <div class="start" id="startBtn">立即抽獎(jiǎng)</div>
        </li>
        <li class="li li-3">
            <div class="up"><span class="yuan">￥</span>10</div>
            <div class="down">電影票紅包</div>
        </li>
        <li class="li li-6">
            <div class="up"><span class="yuan">￥</span>40</div>
            <div class="down">觀影券</div>
        </li>
        <li class="li li-5">
            <div class="tongcheng"></div>
            <div class="down">同城公仔</div>
        </li>
        <li class="li li-4">
            <div class="up"><span class="yuan">￥</span>3</div>
            <div class="down">電影票紅包</div>
        </li>
    </ul>
</section>

css

section {
    background: url(http://img1.40017.cn/cn/s/2016/touch/zt/45587/img_3.jpg) top center no-repeat;
    background-size: contain;
    height: 5.76rem;
    position: relative;
}

.lottery-box {
    margin: auto;
    width: 5.65rem;
    padding-left: .2rem;
    height: 4.6rem;
    overflow: hidden;
    padding-top: .65rem;
}

.lottery-box li {
    background: url(http://img1.40017.cn/cn/s/2016/touch/zt/45587/lottery-bg.png) center no-repeat;
    background-size: contain;
    width: 1.67rem;
    height: 1.43rem;
    float: left;
    margin: 0 .2rem .12rem 0;
    position: relative;
}

.lottery-box li:nth-child(5) {
    background: url(http://img1.40017.cn/cn/s/2016/touch/zt/45587/btn-bg.png) center no-repeat;
    background-size: contain;
    font-size: .32rem;
    color: #222c45;
    font-weight: 600;
    line-height: 1.43rem;
    text-align: center;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .1);
}

.lottery-box .on {
    background: url(http://img1.40017.cn/cn/s/2016/touch/zt/45587/lottery-on.png) center no-repeat;
    background-size: contain;
}

.lottery-box .up {
    padding: 0 .1rem;
    height: .55rem;
    background: #f2ede8;
    border-radius: .15rem;
    color: #8e7b67;
    font-size: .36rem;
    font-family: Arial;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    display: inline-block;
    font-weight: 600;
    position: absolute;
    top: .2rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.lottery-box .yuan {
    font-size: .2rem;
}

.lottery-box .down {
    color: #f7e0c3;
    font-size: .24rem;
    text-align: center;
    line-height: 1em;
    margin: .95rem 0 0 0;
}

.lottery-box .tongcheng {
    width: .91rem;
    height: .75rem;
    background: url(http://img1.40017.cn/cn/s/2016/touch/zt/45587/tongcheng.png) center no-repeat;
    background-size: contain;
    position: absolute;
    top: .2rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

js

function Lottery() {
    this.timer = null; //定時(shí)器
    this.rotateIndex = 0; //旋轉(zhuǎn)初始位置
    this.speed = 200; //旋轉(zhuǎn)初始位置
    this.circle = 0; //已轉(zhuǎn)動(dòng)圈數(shù)
    this.minCircle = 5; //至少轉(zhuǎn)多少圈
    this.prize = 0; //中獎(jiǎng)索引
    this.count = $('#lotteryUl').find('.li').length; //獎(jiǎng)品數(shù)量
    this.backFn = function() {}; //動(dòng)畫(huà)結(jié)束執(zhí)行的函數(shù)
}

Lottery.prototype = {
    // 開(kāi)始
    start: function() {

        var that = this;
        timer = setTimeout(function() {
            that.start();
        }, this.speed);

        this.addCircle();
        this.setState();
        this.changeSpeed();
    },
    // 停止
    stop: function(argument) {
        if (this.circle > this.minCircle && this.prize == this.rotateIndex) {
            console.log(this.circle, this.rotateIndex)
            clearTimeout(timer);
            // 返回函數(shù)
            setTimeout(this.backFn, 300);
        }
    },
    // 動(dòng)畫(huà)-當(dāng)前位置添加class
    setState: function() {
        var beforeIndex = this.rotateIndex === 0 ? this.count - 1 : this.rotateIndex - 1;
        $('#lotteryUl').find('.li-' + beforeIndex).removeClass('on');
        $('#lotteryUl').find('.li-' + this.rotateIndex).addClass('on');

        this.stop();

        this.rotateIndex = this.rotateIndex + 1;
        if (this.rotateIndex == this.count) {
            this.rotateIndex = 0;
        }
    },
    // 改變速度-第一圈加速，最后2圈減速
    changeSpeed: function() {
        // 加速
        if (this.circle < 2) {
            this.speed -= 15;
        }
        // 減速
        if (this.circle > this.minCircle - 1) {
            this.speed += 30;
        }
    },
    // 轉(zhuǎn)動(dòng)圈數(shù)
    addCircle: function(argument) {
        if (this.rotateIndex == 0) {
            this.circle = this.circle + 1;
        }
    }
}

// 點(diǎn)擊事件-開(kāi)始按鈕
$('#startBtn').on('click', function() {
    var ul = $('#lotteryUl').find('li');
    ul.removeClass('stop');
    ul.removeClass('on');

    var lotteryFn = new Lottery();
    lotteryFn.start();
    lotteryFn.prize = 3;
    lotteryFn.backFn = function() {
        alert('中獎(jiǎng)了申窘！')
    };
})