红包

$(selector).delegate(childSelector,event,data,function);

childSelector

必需。规定要附加事件处理程序的一个或多个子元素。

event

必需。规定附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。

 

 

var redBag = {

    init: function () {
        var raining = true,
            createInterval,
            walkInterval,
            createIntervalTime = 500,//生成红包间隔时间
            walkIntervalTime = 30,//红包动画的间隔时间
            imgPath = 'img/',
            images = ['monkey1.png', 'monkey2.png', 'monkey3.png', 'monkey4.png', 'monkey5.png', 'monkey6.png','monkey7.png'],
            windowWidth = $(window).width(),
            windowHeight = $(window).height();
        /**
         * 设置定时器
         */
        function redBagSetInterval() {
　　　　　　//需要下红包雨，需要红包运动，那么设置定时器
            if (raining && !createInterval) {
                createInterval = setInterval(createRedBag, createIntervalTime);
            }
            if (raining && !walkInterval) {
                walkInterval = setInterval(walk, walkIntervalTime);
            }

        }
        /**
         * 清除定时器
         */
        function redBagClearInterval() {
            if (createInterval) {
                clearInterval(createInterval);
                createInterval = null;
            }
            if (walkInterval) {
                clearInterval(walkInterval);
                walkInterval = null;
            }
        }
        /**
         * body添加class名为red-bag-wrap
         */
        $('<div></div>').addClass('red-bag-wrap')
            .width(windowWidth)
            .height(windowHeight)
            .appendTo('body');

        $('<div></div>').addClass('red-bag-result-mask').hide().appendTo('.red-bag-wrap');
        $('<div></div>').addClass('red-bag-result').appendTo('.red-bag-result-mask');

        $('<p></p>').appendTo('.red-bag-result');
        $('<div></div>').addClass('red-bag-close').appendTo('.red-bag-result');
        /**
         * 确定点击事件
         */
        $('.red-bag-close').on('click', function () {
            raining = true;
            redBagWrapDelegate();
            $('.red-bag').removeClass('no-click');
            $('.red-bag-result-mask').hide();

            redBagSetInterval();
            $('.red-bag-mask').remove();
        });
        /**
         * minValue 最小值
         * maxValue 最大值
         */
        function generateRandom(minValue, maxValue) {
            /**
             * 取值范围总数
             */

            var choices = maxValue - minValue + 1;
            return Math.floor(Math.random() * choices + minValue);
        }
        //
        redBagSetInterval();
        /**
         * 生成红包
         */


        function createRedBag() {
            var leftValue = generateRandom(0, windowWidth);
            /**
             * 图片随机出现
             */

            var imgSrc = imgPath + images[generateRandom(0, images.length - 1)];
            //
            $('<img src="' + imgSrc + '"/>').addClass('red-bag').css({left: leftValue + 'px'})
                //30
                .data('step', 3)
                .appendTo('.red-bag-wrap');
        }

        /**
         * 红包运动
         */

        function walk() {
            $('.red-bag').each(function () {
                $(this).css({top: parseInt($(this).css('top')) + $(this).data('step') + 'px'});
                //
                if (windowHeight <= parseInt($(this).css('top'))) {
                    $(this).remove();
                }
            });
        }
        function redBagWrapDelegate() {
            /**
             * 红包选中事件
             */
            $('.red-bag-wrap').delegate('.red-bag', 'click', function () {
                raining = false;
                redBagClearInterval();
                loadingUtil.show();
                $('.red-bag-result').show();
                //这边需要后台交互，后台判断是否已经参与活动，是否中奖（后台随机生成）

                //$.get('path/to/your/url')
                //.success(function (data) {
                //    var status = data.status;
                //    var message = '';
                //    switch (status) {
                //        case 0:
                //            message = '恭喜您获得' + data.prize + '，我们会在\
                //                3个工作日内将奖品寄送到您注册时所\
                //                填的地址，如有其他疑问请联系客服！';
                //            break;
                //        case 1:
                //            message = '抱歉，该红包中没有奖品哦，继续加油吧！';
                //            break;
                //        case 2:
                //            message = '抱歉！您已无抽奖机会.';
                //            break;
                //        default :
                //            break;
                //    }
                //
                //    loadingUtil.hide();
                //    $('.red-bag-result p').text(message);
                //    $('.red-bag-result').show();
                //
                //    $('.red-bag-wrap').undelegate('.red-bag', 'click');
				 //   $('.red-bag').addClass('no-click');
                //});

                // test start
                setTimeout(function () {
                    var status = generateRandom(0,2);
                    var message = '';
                    switch (status) {
                        case 0:
                            message = '恭喜您获得 iPhone 6S 一台，我们会在\
                            3个工作日内将奖品寄送到您注册时所\
                            填的地址，如有其他疑问请联系客服！';
                            break;
                        case 1:
                            message = '抱歉，该红包中没有奖品哦，继续加油吧！';
                            break;
                        case 2:
                            message = '抱歉！您已无抽奖机会.';
                            break;
                        default :
                            break;
                    }

                    loadingUtil.hide();
                    $('.red-bag-result p').text(message);
                    $('.red-bag-result-mask').show();
                    $('.red-bag-wrap').undelegate('.red-bag', 'click');
					$('.red-bag').addClass('no-click');
                }, 2000);
                // test end

            });
        }
        redBagWrapDelegate();

        $(window).resize(function () {
            windowWidth = $(window).width();
            windowHeight = $(window).height();
            $('.red-bag-wrap').width(windowWidth).height(windowHeight);
        });
        window.onfocus = function () {
            redBagSetInterval();
        };

        window.onblur = function () {
            redBagClearInterval();
        };

        $(document).unload(function () {
            redBagClearInterval();
        });
    }
};

　　

 http://www.heishou.com.cn/ 交流论坛可以点击这个链接