气球或者泡泡向上飘动 jQuery插件

 

 

圣诞、元旦要来了，公司以往基本每个月至少要搞一两款手机小游戏来宣传产品，这次也不例外！！

之前做过，按压柚子、许愿、吃柚子等等小游戏，这次是做个那种 气球向上飘动，戳破气球，随机获取奖品。如下图：

手机端和PC端都有做，其中比较麻烦的就是随机生成各种颜色的气球，向上飘动。位置、大小、颜色都是随机的。。

我就封装成JQuery插件。。方便调用。。

 吐槽一下，这种游戏比较适合手机端，PC端体验不好，而且根据统计PC端基本没人玩；但是没办法，老大们说PC端、移动端都要做。。那咱搞起呗！！！

PC版：http://www.uzise.com/topic-balloon

移动版：http://mobile.uzise.com/topic-balloon

  或者微信扫描进入：

 

  

 

 
PS：现在只是向上飘动，可以扩展一下，比如左右飘动，向下飘动，用于气泡、下雪？？等等。。抽空再把这插件扩展一下。。

/**
 * 气球或者泡泡向上飘动
 * $(".box").fly({
 *      photos: ["images/red.png", "images/yellow.jpg"]
 * });
 * Created by 赵欢磊 on 2014/12/10
 * http://www.cnblogs.com/huanlei/
 */

;(function($) {
    $.fn.extend({
        fly: function(options) {
            options = $.extend({
                minSize: 40,    //气球最小尺寸
                maxSize: 100,    //气球最大尺寸
                interval: 300,    //气球生成时间间隔，数值越小气球越多
                photos: []    //气球一张或多张图片，数组
            }, options);

            var timer,
                box = $(this),
                boxHeight = box.height(),
                boxWidth = box.width(),
                len = options.photos.length,
                photo = $("<img/>").css({"position": "absolute"});
            box.css({"position": "relative", "overflow": "hidden"});
            if (!len) return;   //至少一张图片，否则不执行下面的
            timer = setInterval(function() {
                var photoSrc = options.photos[Math.floor(Math.random() * len)],
                    photoWidth = parseInt(options.minSize) + Math.random() * (parseInt(options.maxSize) - parseInt(options.minSize)),
                    startTop = boxHeight,
                    endTop = "-100%",
                    startLeft = Math.floor(Math.random() * boxWidth),
                    endLeft = Math.abs(startLeft - Math.floor(Math.random() * boxWidth)),
                    duration = parseInt(boxHeight * 10 + Math.random() * 1000);
                if (!photoSrc.trim()) return;  //图片src不能是空的
                photo.clone().attr("src", photoSrc).appendTo(box).css({
                    top: startTop,
                    left: startLeft,
                    width: photoWidth
                }).animate({
                    top: endTop,
                    left: endLeft
                }, duration, "linear", function() {
                    $(this).remove();
                });
            }, options.interval);
        }
    });
})(jQuery);