您好，我正在使用这个不错的 jQuery 插件：https ://github.com/Matt-Stevens/jQuery-FireFly
我想知道，如果您仔细观察火花的动画，它们会变慢并停在特定点。这与边界有关吗？如何停用此“stop'n'go”？
这是代码：
/*
* FireFly v1.1.1 - jQuery plugin
*
* An updated version of Dharmveer Motyar's firefly plugin.
* Creates an effect of fireflys flying around your page.
*
* @example $.firefly()
*
* // to stop and start
* $.firefly.stop()
* $.firefly.start()
*
* Copyright © 2011 Matt 'Dirty Monkey' Stevens, http://www.dirtymonkey.co.uk
* License: http://www.opensource.org/licenses/mit-license.php
*/
(function($){
/*
* default settings
*/
var defaults = {
// base64 encoded to cut down requests,
// doesn't work in IE <= 7.0 and I'm not bothered to be honest
images: [ // spark one
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAABjCAYAAACPO76VAAAA'+
'BGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAA'+
'D6SURBVHja7Nc7CsJAAEVRM/7ARqws3f+q3IBVrETC+AIpUthPBs6FB2nDYfIZaq07baMB'+
'BgzBgCEYMAQDhmDAEAwYgiEYMAQDhmDAEAwYggFDMGAIhmDAEAwYggFDMGAIBgzBgCEYgg'+
'FDMGAIBgzBgCEYf+9hdV1htOuQnbOSfbNPzyA9Y8wn4pI9smv2zF7Z1CtI6fwRVRaIe3by'+
'zmh7MuZH1C07ZmP2Xk4GjEYg+9XLe3IytoHS/2eh/wwYggFDMGAIBgzBgCEYMARDMGAIBg'+
'zBgCEYMAQDhmDAEAzBgCEYMAQDhmDAEAwYggFDMAQDhmDAEIwu+wkwAGUEM3yaFGKDAAAA'+
'AElFTkSuQmCC',
// spark two
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAABjCAYAAACPO76VAAAA'+
'BGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAA'+
'FjSURBVHja7NrRasJAEEDRjuT/f3n6KrLZnTamZppzQSpthJLjZLNiZOaXrtHDKYAhGDAE'+
'A4ZgwBAMGIIBQzAEA4ZgwBAMGIIBQzBgCAYMwRAMGIIBQzBgCAYMwYAhGHdra/p/x+B3Ce'+
'OzAHt/Txh/AzFDyadj2oE8GkFEcTqiOEkm4wDEbyaj1YRsjSBiApQDlHYgW0OI1WVoBNEC'+
'pNvdVOysHa8n293UyQv3CGP1jneZOnE/UQHJyWsvjdLl45BY3FHF5Fj7jA9sAFsCdMfIwn'+
'MYJwPkYl+xd6y7qYMnPopT8bworxDsM96AUj3BOXi0unx12vTlZHqq0wHj4FRUPtLI4k8Y'+
'bwRZrQE5AYJxwqKexeNdpk5aJ+Ll+U/3IDBMxj3upnw75KIw/yZfYoMhGDAEA4ZgwBAMGI'+
'IBQzAEA4ZgwBAMGIIBQzBgCAYMwRAMGIIBQzBgCAYMwYAhGLfrW4ABAC0AVeQCiPR5AAAA'+
'AElFTkSuQmCC',
// spark three
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAABjCAYAAACPO76VAAAA'+
'BGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAA'+
'JxSURBVHja7J3BkuMgDERHLv7/l3vvW5sdx4DUwq+PSYGFnoTElMOEpB/koQsXAAMBAxgI'+
'GMBAwAAGAgYwEDCAgYCBgAEMBAxgIGAAA81oNLI1JsYKGLUAPs0jYOQDaAfmehmIfz0vgO'+
'HlFAsg42WZcMcWvTEznEBY2HUBwse+0Wyh347V5LN0MowoHCd3IJc5iJVdVkzYcBSMKISw'+
'Yu44BUaYQFgRIK85gUdytNudwIeJg2PRnPGwm7pbqLcW9NEExGw3Ve7oDtvUThA7u7JWMN'+
'wceNeuqAQyTLNihdP0cOsq264u06xYkS0xATwq1nk1yoowDI5jzxmfHLeidsR/5n41jPgS'+
'xF1HR4I9rQ59YQRUCcV56XyXSVbsiFibiO9WM3b1963Aub7eubLYRpfs4F1bYKQ3BgEMVA'+
'aj+wm53P6VMJQ8brXK7e+yTal4PDWDmoGAcWNbkcFcR8HQ5J6uRc9bbdfx25ROcHAlDCWC'+
'0sPvbNc7iiI+bn6uXw5VMsjAY7cpfRnps5l0/K9dtSm9lRj52mhPqwKuBxH+symjUhUb/2'+
'XD7LtHUQC7LCscMkPJka0KJzvA0MJ5ZGTPNjncHfJb+/q3M2MTAFVDHUaOjglnzL6/JIfs'+
'crpV50nk72p7j6sZTxesZPg2dl3GC9dGWywDJLO1VZLjVs+VtpVl14xvCvUnh2TeH3L03S'+
'EzQNxrStsTuPsB7Jjf9HUHUmbXMFl4vBmCQ2a4OMLmT+2nnMCP2CYdLxmeaWNbNw/u12+v'+
'AsNd6IkRHZ2cfgKM9pHfpZtCwAAGAgYwEDCAgYABDAQMYCBgAAMBAwEDGOiT/ggwACwkj/'+
'K9LOCpAAAAAElFTkSuQmCC',
// spark four
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAABjCAYAAACPO76VAAAA'+
'BGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAA'+
'DISURBVHja7NyxDYAwDEVBTIpQsgn770VDZVxQsEECuif9BXxSykRmLpqj1QlgCAYMwYAh'+
'GDAEA4ZgwBAMwYAhGDAEA4ZgwBAMGIIBQzAEA4ZgwBAMGIIBQzBgCAYMwRAMGIIBQzBgCA'+
'YMwXgXta3WYIyv147a/heM+PBPbO2BOGsXDHmmYAgGDMGAIRiCAUMwYAgGDMGAIRgwBAOG'+
'E8AQDBiCAUMwYAgGDMGAIRiCAUMwYAgGDMGAIRgwBAOGYAgGDMGYvVuAAQD5BwwNjgAKGw'+
'AAAABJRU5ErkJggg%3D%3D'
],
total: 50, // anything over a few hundred is gonna crawl
boundary: 100, // avoid the edge of the window
fast: 5, // fastest spark (a lower number is faster)
slow: 1, // slowest spark (a higher number is slower)
limit: 3600, // stop after this many seconds (one hour)
}
// shortcuts
var ff, ffs, x, y, old_x, old_y, start, timer_handle, delay_handle, sparks = []
// init
// initializes and starts everything
$.firefly = function(settings){
ff = $.firefly
ffs = $.extend({}, defaults, settings)
ff.calibrate() // get size of window
ff.make() // load the spark images
ff.start() // start moving them
ff.check_time() // start timer
}
// create
// creates every spark and inserts it into the DOM
$.firefly.make = function(){
for (i = 0; i < ffs.total; i++)
sparks[i] = ff.create(ffs.images[ff.random(0,ffs.images.length-1)])
}
// start
// records start time, watches window resize and begins movement
$.firefly.start = function(){
start = parseInt((new Date).getTime()/1000)
$(window).bind('resize.firefly', function(){
ff.delay(ff.resized, 250)
})
for (i = 0; i < sparks.length; i++) ff.move(sparks[i])
}
// reset
// stop and remove all fireflies, then create and start them again
$.firefly.reset = function(){
for (i = 0; i < ffs.total; i++)
sparks[i].remove()
$.firefly()
}
// delay
// utility function to prevent the resize event from being fired multiple times
$.firefly.delay = function(callback, milliseconds){
clearTimeout(delay_handle)
delay_handle = setTimeout(callback, milliseconds);
}
// resized
// event handler to deal with window resizing
$.firefly.resized = function(e){
ff.calibrate();
(x < old_x || y < old_y) && ff.reset()
}
// stop
// freezes a spark in its current position
$.firefly.stop = function(){
$(window).unbind('resize.firefly')
for (i = 0; i < sparks.length; i++) $(sparks[i]).stop(true)
}
// remove
// removes a spark from the DOM
$.firefly.remove = function() {
for (i = 0; i < ffs.total; i++) $('img[src="'+ffs.images[i]+'"]').remove()
}
// create
// inserts a spark into the DOM at a random position
$.firefly.create = function(i){
var spark = $('<img>').attr({'src':i}).hide()
$("body").append(spark)
spark.css({'position': 'absolute',
'z-index': ff.random(0, 20),
'top': ff.random(ffs.boundary, y - ffs.boundary),
'left': ff.random(ffs.boundary, x - ffs.boundary)
})
return spark.show()
}
// move
// animate to a random position, within the boundaries
$.firefly.move = function(image){
image.animate({top: ff.random(ffs.boundary,y-ffs.boundary), // x coordinate
left: ff.random(ffs.boundary,x-ffs.boundary)}, // y coordinate
ff.random(ffs.slow,ffs.fast) * 1000, // speed
function(){ff.move(image)}) // callback
}
// check_time
// check every second whether or not we have passed the time limit
$.firefly.check_time = function(){
if (parseInt((new Date).getTime()/1000) > (start+ffs.limit)) {
ff.stop()
} else {
window.setTimeout('$.firefly.check_time()', 1000)
}
}
// calibrate
// get the dimensions of the window
$.firefly.calibrate = function(){
old_x = x
old_y = y
x = $(window).width()
y = $(window).height()
}
// random
// return a random number between a and b
$.firefly.random = function(a,b){
return Math.floor(Math.random()*(b-a+1)+a)
}
})(jQuery)