氣球或者泡泡向上飄動 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);