(function ($) {
$.fn.bouncyPlugin = function (option) {
var dhtml = function (params) {
var width = params.width,
height = params.height,
imageWidth = params.imageWidth,
$element = params.target.append('<div/>').find(':last'),
eleStyle = $element[0].style;
$element.css({
position: 'absolute',
width: width,
height: height,
backgroundImage: 'url(' + params.image + ')'
});
var that = {
draw: function (x, y) {
eleStyle.left = x + 'px';
eleStyle.top = y + 'px';
},
changeImage: function (index) {
index *= width;
var vset = -Math.floor(index / imageWidth) * height,
hset = -index % imageWidth;
eleStyle.backgroundPosition = hset + 'px ' + vset + 'px';
},
show: function () {
eleStyle.display = 'block';
},
hide: function () {
eleStyle.display = 'none';
},
destroy: function () {
$element.remove();
}
};
return that;
};
var bouncy = function (params) {
var x = params.x,
y = params.y,
xdir = params.xdir,
ydir = params.ydir,
xmax = params.xmax,
ymax = params.ymax,
animIndex = 0,
that = dhtml(params);
that.moveAndDrow = function () {
x += xdir;
y += ydir;
animIndex += xdir > 0 ? 1 : -1;
animIndex %= 5;
animIndex += animIndex < 0 ? 5 : 0;
((xdir < 0 && x < 0) || (xdir > 0 && x >= xmax)) && (xdir *= -1);
((ydir < 0 && y < 0) || (ydir > 0 && y >= ymax)) && (ydir *= -1);
that.changeImage(animIndex);
that.draw(x, y);
};
return that;
};
var bouncyBoss = function (num, target) {
var bys = [], i = 0;
for (; i < num; i++) {
bys.push(bouncy({
image: 'img.png',
imageWidth: 256,
width: 64,
height: 64,
target: target,
x: Math.random() * target.width() - 64,
y: Math.random() * target.height() - 64,
xdir: Math.random() * 4 - 2,
ydir: Math.random() * 4 - 2,
xmax: target.width() - 64,
ymax: target.height() - 64
}));
(function () {
for (var i = 0, len = bys.length; i < len; i++) {
bys[i].moveAndDrow();
}
setTimeout(arguments.callee, 10);
})();
}
};
option = $.extend({}, $.fn.bouncyPlugin.defaults, option);
return this.each(function () {
var target = $(this);
target.css('background-color', option.bgColor);
bouncyBoss(option.number, target);
});
};
$.fn.bouncyPlugin.defaults = {
bgColor: '#f00',
number: 10
};
})(jQuery);
[
本帖最后由 冰镇柠檬汁儿 于 2015-6-5 22:49 编辑 ]
