气球或者泡泡向上飘动 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: , //气球最小尺寸
maxSize: , //气球最大尺寸
interval: , //气球生成时间间隔，数值越小气球越多
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 * + Math.random() * );
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);