下雪html特效代码,jQuery下雪特效

$(document).ready(function() {

$("canvas.flare").let_it_snow({

windPower: 0,

speed: 0,

color: "#392F52",

size: 120,

opacity: 0.00000001,

count: 40,

interaction: false

});

$("canvas.snow").let_it_snow({

windPower: 3,

speed: 1,

count: 250,

size: 0,

});

$("canvas.flake").let_it_snow({

windPower: -3,

speed: 1,

count: 20,

size: 10,

image: "images/white-snowflake.png"

});

});

! function($) {

var defaults = {

speed: 0,

interaction: true,

size: 2,

count: 200,

opacity: 0,

color: "#ffffff",

windPower: 0,

image: false

};

$.fn.let_it_snow = function(options) {

var settings = $.extend({}, defaults, options),

el = $(this),

flakes = [],

canvas = el.get(0),

ctx = canvas.getContext("2d"),

flakeCount = settings.count,

mX = -100,

mY = -100;

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

(function() {

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||

function(callback) {

window.setTimeout(callback, 1000 / 60);

};

window.requestAnimationFrame = requestAnimationFrame;

})();

function snow() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < flakeCount; i++) {

var flake = flakes[i],

x = mX,

y = mY,

minDist = 100,

x2 = flake.x,

y2 = flake.y;

var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),

dx = x2 - x,

dy = y2 - y;

if (dist < minDist) {

var force = minDist / (dist * dist),

xcomp = (x - x2) / dist,

ycomp = (y - y2) / dist,

deltaV = force / 2;

flake.velX -= deltaV * xcomp;

flake.velY -= deltaV * ycomp;

} else {

flake.velX *= .98;

if (flake.velY <= flake.speed) {

flake.velY = flake.speed

}

switch (settings.windPower) {

case false:

flake.velX += Math.cos(flake.step += .05) * flake.stepSize;

break;

case 0:

flake.velX += Math.cos(flake.step += .05) * flake.stepSize;

break;

default:

flake.velX += 0.01 + (settings.windPower / 100);

}

}

var s = settings.color;

var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;

var matches = patt.exec(s);

var rgb = parseInt(matches[1], 16) + "," + parseInt(matches[2], 16) + "," + parseInt(matches[3], 16);

flake.y += flake.velY;

flake.x += flake.velX;

if (flake.y >= canvas.height || flake.y <= 0) {

reset(flake);

}

if (flake.x >= canvas.width || flake.x <= 0) {

reset(flake);

}

if (settings.image == false) {

ctx.fillStyle = "rgba(" + rgb + "," + flake.opacity + ")"

ctx.beginPath();

ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);

ctx.fill();

} else {

ctx.drawImage($("img#lis_flake").get(0), flake.x, flake.y, flake.size * 2, flake.size * 2);

}

}

requestAnimationFrame(snow);

};

function reset(flake) {

if (settings.windPower == false || settings.windPower == 0) {

flake.x = Math.floor(Math.random() * canvas.width);

flake.y = 0;

} else {

if (settings.windPower > 0) {

var xarray = Array(Math.floor(Math.random() * canvas.width), 0);

var yarray = Array(0, Math.floor(Math.random() * canvas.height))

var allarray = Array(xarray, yarray)

var selected_array = allarray[Math.floor(Math.random() * allarray.length)];

flake.x = selected_array[0];

flake.y = selected_array[1];

} else {

var xarray = Array(Math.floor(Math.random() * canvas.width), 0);

var yarray = Array(canvas.width, Math.floor(Math.random() * canvas.height))

var allarray = Array(xarray, yarray)

var selected_array = allarray[Math.floor(Math.random() * allarray.length)];

flake.x = selected_array[0];

flake.y = selected_array[1];

}

}

flake.size = (Math.random() * 3) + settings.size;

flake.speed = (Math.random() * 1) + settings.speed;

flake.velY = flake.speed;

flake.velX = 0;

flake.opacity = (Math.random() * 0.5) + settings.opacity;

}

function init() {

for (var i = 0; i < flakeCount; i++) {

var x = Math.floor(Math.random() * canvas.width),

y = Math.floor(Math.random() * canvas.height),

size = (Math.random() * 3) + settings.size,

speed = (Math.random() * 1) + settings.speed,

opacity = (Math.random() * 0.5) + settings.opacity;

flakes.push({

speed: speed,

velY: speed,

velX: 0,

x: x,

y: y,

size: size,

stepSize: (Math.random()) / 30,

step: 0,

angle: 180,

opacity: opacity

});

}

snow();

}

if (settings.image != false) {

$("

").prependTo("body")

}

init();

$(window).resize(function() {

if (this.resizeTO) clearTimeout(this.resizeTO);

this.resizeTO = setTimeout(function() {

el2 = el.clone();

el2.insertAfter(el);

el.remove();

el2.let_it_snow(settings);

}, 200);

});

if (settings.interaction == true) {

canvas.addEventListener("mousemove", function(e) {

mX = e.clientX,

mY = e.clientY

});

}

}

}(window.jQuery);