使用jquery获取老虎机效果

时间：2015-01-06 13:20:39

标签： javascript jquery html css

我正在尝试使用以下jquery插件创建一个老虎机：jquery slot machine

我从简单的Demo开始，进入我自己的列表。我遇到的问题是我需要的不仅仅是显示列表1行的那个块。我需要显示列表中间行的上方和下方。所以我把jSlotsWrapper框做得更大。

现在我遇到的问题是，当列表旋转时，在列表的末尾会看到空白区域。如何让列表无止境？因此，如果列表中的最后一项是，我想重新开始列表。

修改

这是我的html文件

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Datengut Spielautomat</title>

<style type="text/css">

body {
    text-align: center;
    position: absolute;
    height: 600px;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

li {
    height: 62px;
}

.jSlots-wrapper {
    overflow: hidden;
    text-align: center;
    font-family:arial,helvetica,sans-serif;
    font-size: 40px;
    text-shadow: 2px 2px 2px #888888;
    height: 600px;
    width: 1242px;
    margin: 10px auto;
    border: 2px solid;
    border-color: #ffa500;
    box-shadow: 5px 5px 5px #888888;
    box-shadow: inset 0 200px 100px -100px #555555, inset 0 -200px 100px -100px #555555;
}

.jSlots-wrapper::after {
    content: "";
    background:url("blumen.jpg");
    opacity: 0.5;
    z-index: -1;
}

.slot {
    z-index: -1;
    width: 410px;
    text-align: center;
    margin-left: 5px auto;
    margin-right: 5px auto;
    float: left;
    border-left: 2px solid;
    border-right: 2px solid;
    border-color: #ffa500;
}

.line {
    width: 410px;
    height: 2px;
    -webkit-transform:
        translateY(-20px)
        translateX(5px)

}

</style>

</head>

<body>

<ul class="slot">
    <li>Bauakte</li>
    <li></li>
    <li>Bautagebuch</li>
    <li></li>
    <li>Mängelverwaltung</li>
    <li></li>
    <li>Störungsverwaltung</li>
    <li></li>
    <li>Personalakte</li>
    <li></li>
    <li>Maschinenakte</li>
    <li></li>
</ul>

<script src="jquery.1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.jSlots.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    // normal example
    $('.slot').jSlots({
        number : 3,
        spinner : 'body',
        spinEvent : 'keypress',
        easing: 'easeOutSine',
        time : 7000,
        loops : 6,
    });

</script>

</body>
</html>

这是我的js文件：

(function($){

$.jSlots = function(el, options){

    var base = this;

    base.$el = $(el);
    base.el = el;

    base.$el.data("jSlots", base);

    base.init = function() {

        base.options = $.extend({},$.jSlots.defaultOptions, options);

        base.setup();
        base.bindEvents();

    };


    // --------------------------------------------------------------------- //
    // DEFAULT OPTIONS
    // --------------------------------------------------------------------- //

    $.jSlots.defaultOptions = {
        number : 3,          // Number: number of slots
        winnerNumber : 1,    // Number or Array: list item number(s) upon which to trigger a win, 1-based index, NOT ZERO-BASED
        spinner : '',        // CSS Selector: element to bind the start event to
        spinEvent : 'click', // String: event to start slots on this event
        onStart : $.noop,    // Function: runs on spin start,
        onEnd : $.noop,      // Function: run on spin end. It is passed (finalNumbers:Array). finalNumbers gives the index of the li each slot stopped on in order.
        onWin : $.noop,      // Function: run on winning number. It is passed (winCount:Number, winners:Array)
        easing : 'swing',    // String: easing type for final spin
        time : 7000,         // Number: total time of spin animation
        loops : 6            // Number: times it will spin during the animation
    };

    // --------------------------------------------------------------------- //
    // HELPERS
    // --------------------------------------------------------------------- //

    base.randomRange = function(low, high) {
        return Math.floor( Math.random() * (1 + high - low) ) + low;
    };

    // --------------------------------------------------------------------- //
    // VARS
    // --------------------------------------------------------------------- //

    base.isSpinning = false;
    base.spinSpeed = 0;
    base.winCount = 0;
    base.doneCount = 0;

    base.$liHeight = 0;
    base.$liWidth = 0;

    base.winners = [];
    base.allSlots = [];

    // --------------------------------------------------------------------- //
    // FUNCTIONS
    // --------------------------------------------------------------------- //


    base.setup = function() {

        // set sizes

        var $list = base.$el;
        var $li = $list.find('li').first();

        base.$liHeight = $li.outerHeight();
        base.$liWidth = $li.outerWidth();

        base.liCount = base.$el.children().length;

        base.listHeight = base.$liHeight * base.liCount;

        base.increment = (base.options.time / base.options.loops) / base.options.loops;

        $list.css('position', 'relative');

        $li.clone().appendTo($list);

        base.$wrapper = $list.wrap('<div class="jSlots-wrapper"></div>').parent();

        // remove original, so it can be recreated as a Slot
        base.$el.remove();

        // clone lists
        for (var i = base.options.number - 1; i >= 0; i--){
            base.allSlots.push( new base.Slot() );
        }

    };

    base.bindEvents = function() {
        $(base.options.spinner).bind(base.options.spinEvent, function(event) {
            if (event.which == 32) {
                if (!base.isSpinning) {
                    base.playSlots();
                }
            }
        });
    };

    // Slot constructor
    base.Slot = function() {
        this.spinSpeed = 0;
        this.el = base.$el.clone().appendTo(base.$wrapper)[0];
        this.$el = $(this.el);
        this.loopCount = 0;
        this.number = 0;

    };


    base.Slot.prototype = {

        // do one rotation
        spinEm : function() {
            var that = this;

            that.$el
                .css( 'top', -base.listHeight )
                .animate( { 'top' : '0px' }, that.spinSpeed, 'linear', function() {
                    that.lowerSpeed();
                });
        },

        lowerSpeed : function() {
            this.spinSpeed += base.increment;
            this.loopCount++;

            if ( this.loopCount < base.options.loops ) {
                this.spinEm();
            } else {
                this.finish();
            }
        },

        // final rotation
        finish : function() {
            var that = this;

            var endNum = base.randomRange( 1, base.liCount );
            while (endNum % 2 == 0) {
                endNum = base.randomRange( 1, base.liCount );
            }

            var finalPos = - ( (base.$liHeight * endNum) - base.$liHeight );
            var finalSpeed = ( (this.spinSpeed * 0.5) * (base.liCount) ) / endNum;

            that.$el
                .css( 'top', -base.listHeight )
                .animate( {'top': finalPos}, finalSpeed, base.options.easing, function() {
                    base.checkWinner(endNum, that);
                });
        }
    };

    base.checkWinner = function(endNum, slot) {

        base.doneCount++;
        // set the slot number to whatever it ended on
        slot.number = endNum;

        // if its in the winners array
        if (
            ( $.isArray( base.options.winnerNumber ) && base.options.winnerNumber.indexOf(endNum) > -1 ) ||
            endNum === base.options.winnerNumber
            ) {

            // its a winner!
            base.winCount++;
            base.winners.push(slot.$el);

        }

        if (base.doneCount === base.options.number) {

            var finalNumbers = [];

            $.each(base.allSlots, function(index, val) {
                finalNumbers[index] = val.number;
            });

            if ( $.isFunction( base.options.onEnd ) ) {
                base.options.onEnd(finalNumbers);
            }

            if ( base.winCount && $.isFunction(base.options.onWin) ) {
                base.options.onWin(base.winCount, base.winners, finalNumbers);
            }
            base.isSpinning = false;
        }
    };


    base.playSlots = function() {

        base.isSpinning = true;
        base.winCount = 0;
        base.doneCount = 0;
        base.winners = [];

        if ( $.isFunction(base.options.onStart) ) {
            base.options.onStart();
        }

        $.each(base.allSlots, function(index, val) {
            this.spinSpeed = 250*index;
            this.loopCount = 0;
            this.spinEm();
        });

    };


    base.onWin = function() {
        if ( $.isFunction(base.options.onWin) ) {
            base.options.onWin();
        }
    };


    // Run initializer
    base.init();
};


// --------------------------------------------------------------------- //
// JQUERY FN
// --------------------------------------------------------------------- //

$.fn.jSlots = function(options){
    if (this.length) {
        return this.each(function(){
            (new $.jSlots(this, options));
        });
    }
};

})(jQuery);

核心功能与github存储库中的相同。

我认为重要的部分是函数spinEm：

            spinEm : function() {
            var that = this;

            that.$el
                .css( 'top', -base.listHeight )
                .animate( { 'top' : '0px' }, that.spinSpeed, 'linear', function() {
                    that.lowerSpeed();
                });
        }

此处列表位于jSlotsWrapper上方，并且动画功能向下移动。现在我需要的是动画继续，而不是再次将列表放在顶部。我怎样才能做到这一点。

修改

好的，我每次动画完成后都尝试以下方法来避免空白区域：

        spinEm : function() {

            var that = this;

            that.$el
                .css( 'bottom', $("body").height() )
                .animate( { 'top' : '0px' }, that.spinSpeed, 'linear', function() {
                    that.lowerSpeed();
                });

        }

我尝试将列表放在框的底部并向下移动直到顶部出现。但不知何故，这份名单并没有真正动起来。它只移动1个单词然后完全停止。动画代码有什么问题？

修改

好的，我找到了解决问题的方法。显然，我不能在css函数中使用bottom。相反，我使用了top并计算了列表顶部边框的位置。这样我就可以在开始时没有所有空白区域的动画。为了避免从列表的底部跳到顶部，我修改了jSlots-Wrapper的高度和列表项的顺序，以便在跳转之前和之后显示的项目是相同的。这样，用户就不会看到列表跳跃。

这是我的新animate功能。

        spinEm : function() {
            var that = this;

            that.$el
                .css( 'top', -(base.listHeight - $("body").height()) )
                .animate( { 'top' : '0px'}, that.spinSpeed, 'linear', function() {
                    that.lowerSpeed();
                });
        }

1 个答案:

答案 0 :(得分：0)

我找到了制作动画的方法，以便用户不会看到跳跃。我所做的是，我以某种方式配置列表，以便开头和结尾相同。因此，当到达列表的末尾并再次跳到开头时，没有区别。跳转仍然存在，但对用户不可见。

相关问题
最新问题