【jquery插件】-网页下雪效果

又到了年底，从圣诞节开始，可以发现各大网站的活动是越来越多，都变的银装素裹，本人由于业务需求也需要做这么一个效果，所以就通过google大神找了一下相关资源，结果就出现了N种雪花效果的方式。种类繁多，最后找到了本文看到的这种效果，原作者写的可以说已经满足了我的需求，但是为了符合更多的场景，又再原作者的基础上做了调整。

声明：本文核心代码归原作者@Ivan Lazarevic（https://github.com/kopipejst）所有，本人只增加了一些参数和效果

兼容性：除IE外各主流浏览器（当然也可以调整代码，支持IE高版本浏览器，本文实例不支持IE）

经过调整的代码如下：

（上半部分为jquery-easing，下半部分为雪花效果）

(function($){

	/*

 * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/

 *

 * Uses the built in easing capabilities added In jQuery 1.1

 * to offer multiple easing options

 *

 * TERMS OF USE - jQuery Easing

 *

 * Open source under the BSD License.

 *

 * Copyright © 2008 George McGinley Smith

 * All rights reserved.

 *

 * Redistribution and use in source and binary forms, with or without modification,

 * are permitted provided that the following conditions are met:

 *

 * Redistributions of source code must retain the above copyright notice, this list of

 * conditions and the following disclaimer.

 * Redistributions in binary form must reproduce the above copyright notice, this list

 * of conditions and the following disclaimer in the documentation and/or other materials

 * provided with the distribution.

 *

 * Neither the name of the author nor the names of contributors may be used to endorse

 * or promote products derived from this software without specific prior written permission.

 *

 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY

 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF

 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE

 *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,

 *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE

 *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED

 * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING

 *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED

 * OF THE POSSIBILITY OF SUCH DAMAGE.

 *

*/

// t: current time, b: begInnIng value, c: change In value, d: duration

jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,

{

	def: 'easeOutQuad',

	swing: function (x, t, b, c, d) {

		//alert(jQuery.easing.default);

		return jQuery.easing[jQuery.easing.def](x, t, b, c, d);

	},

	easeInQuad: function (x, t, b, c, d) {

		return c*(t/=d)*t + b;

	},

	easeOutQuad: function (x, t, b, c, d) {

		return -c *(t/=d)*(t-2) + b;

	},

	easeInOutQuad: function (x, t, b, c, d) {

		if ((t/=d/2) < 1) return c/2*t*t + b;

		return -c/2 * ((--t)*(t-2) - 1) + b;

	},

	easeInCubic: function (x, t, b, c, d) {

		return c*(t/=d)*t*t + b;

	},

	easeOutCubic: function (x, t, b, c, d) {

		return c*((t=t/d-1)*t*t + 1) + b;

	},

	easeInOutCubic: function (x, t, b, c, d) {

		if ((t/=d/2) < 1) return c/2*t*t*t + b;

		return c/2*((t-=2)*t*t + 2) + b;

	},

	easeInQuart: function (x, t, b, c, d) {

		return c*(t/=d)*t*t*t + b;

	},

	easeOutQuart: function (x, t, b, c, d) {

		return -c * ((t=t/d-1)*t*t*t - 1) + b;

	},

	easeInOutQuart: function (x, t, b, c, d) {

		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;

		return -c/2 * ((t-=2)*t*t*t - 2) + b;

	},

	easeInQuint: function (x, t, b, c, d) {

		return c*(t/=d)*t*t*t*t + b;

	},

	easeOutQuint: function (x, t, b, c, d) {

		return c*((t=t/d-1)*t*t*t*t + 1) + b;

	},

	easeInOutQuint: function (x, t, b, c, d) {

		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;

		return c/2*((t-=2)*t*t*t*t + 2) + b;

	},

	easeInSine: function (x, t, b, c, d) {

		return -c * Math.cos(t/d * (Math.PI/2)) + c + b;

	},

	easeOutSine: function (x, t, b, c, d) {

		return c * Math.sin(t/d * (Math.PI/2)) + b;

	},

	easeInOutSine: function (x, t, b, c, d) {

		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;

	},

	easeInExpo: function (x, t, b, c, d) {

		return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;

	},

	easeOutExpo: function (x, t, b, c, d) {

		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;

	},

	easeInOutExpo: function (x, t, b, c, d) {

		if (t==0) return b;

		if (t==d) return b+c;

		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;

		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;

	},

	easeInCirc: function (x, t, b, c, d) {

		return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;

	},

	easeOutCirc: function (x, t, b, c, d) {

		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;

	},

	easeInOutCirc: function (x, t, b, c, d) {

		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;

		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;

	},

	easeInElastic: function (x, t, b, c, d) {

		var s=1.70158;var p=0;var a=c;

		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;

		if (a < Math.abs(c)) { a=c; var s=p/4; }

		else var s = p/(2*Math.PI) * Math.asin (c/a);

		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

	},

	easeOutElastic: function (x, t, b, c, d) {

		var s=1.70158;var p=0;var a=c;

		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;

		if (a < Math.abs(c)) { a=c; var s=p/4; }

		else var s = p/(2*Math.PI) * Math.asin (c/a);

		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;

	},

	easeInOutElastic: function (x, t, b, c, d) {

		var s=1.70158;var p=0;var a=c;

		if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);

		if (a < Math.abs(c)) { a=c; var s=p/4; }

		else var s = p/(2*Math.PI) * Math.asin (c/a);

		if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

		return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;

	},

	easeInBack: function (x, t, b, c, d, s) {

		if (s == undefined) s = 1.70158;

		return c*(t/=d)*t*((s+1)*t - s) + b;

	},

	easeOutBack: function (x, t, b, c, d, s) {

		if (s == undefined) s = 1.70158;

		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

	},

	easeInOutBack: function (x, t, b, c, d, s) {

		if (s == undefined) s = 1.70158;

		if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;

		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;

	},

	easeInBounce: function (x, t, b, c, d) {

		return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;

	},

	easeOutBounce: function (x, t, b, c, d) {

		if ((t/=d) < (1/2.75)) {

			return c*(7.5625*t*t) + b;

		} else if (t < (2/2.75)) {

			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;

		} else if (t < (2.5/2.75)) {

			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;

		} else {

			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;

		}

	},

	easeInOutBounce: function (x, t, b, c, d) {

		if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;

		return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;

	}

});

/*

 *

 * TERMS OF USE - EASING EQUATIONS

 *

 * Open source under the BSD License.

 *

 * Copyright © 2001 Robert Penner

 * All rights reserved.

 *

 * Redistribution and use in source and binary forms, with or without modification,

 * are permitted provided that the following conditions are met:

 *

 * Redistributions of source code must retain the above copyright notice, this list of

 * conditions and the following disclaimer.

 * Redistributions in binary form must reproduce the above copyright notice, this list

 * of conditions and the following disclaimer in the documentation and/or other materials

 * provided with the distribution.

 *

 * Neither the name of the author nor the names of contributors may be used to endorse

 * or promote products derived from this software without specific prior written permission.

 *

 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY

 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF

 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE

 *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,

 *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE

 *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED

 * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING

 *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED

 * OF THE POSSIBILITY OF SUCH DAMAGE.

 *

 */

	$.fn.snow = function(options){

		//处理浏览器

		var na = window.navigator;

		var ua = na.userAgent.toLowerCase();

		var browserTester = /(webkit|gecko|presto|opera|safari|firefox|chrome|applewebkit)[ \/os]*([\d_.]+)/ig

		if(!browserTester.test(ua)) {

			return;

		}

		var winHeight = $(window).height();

		var docHeight = $(document).height();

		var docWidth = $(document).width();

		var defaults = {

			minSize: 20,		//雪花的最小尺寸

			maxSize: 50,		//雪花的最大尺寸

			speed: docHeight * 10, //雪花掉落速度

			frequency: 500,		//雪花出现的频率

			color: "#FFFFFF", //雪花颜色

			easing: 'linear', //雪花动画效果

			position: 'absolute' //定位方式

		};

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

		var $snow = $('<div>').css({'position': options.position, 'top': '-50px', 'z-index':9999999999}).html('❄');

		var height = options.position == "fixed" ? winHeight : docHeight;

		var width = docWidth;

		$('body').css('overflow-x', 'hidden');

		var interval = setInterval( function(){

			var startPositionLeft = Math.random() * width - 100;

			var startOpacity = 0.5 + Math.random();

			var size = options.minSize + Math.random() * options.maxSize;

			var endPositionTop = height - 40;

			var endPositionLeft = startPositionLeft + (Math.random()*10 > 5 ? -500 : 500);

			$snow.clone().appendTo('body').css({

						left: startPositionLeft,

						opacity: startOpacity,

						'font-size': size,

						color: options.color

					}).animate({

						top: endPositionTop,

						left: endPositionLeft,

						opacity: 0.2

					},options.speed, options.easing,function(){

						$(this).remove()

					}

				);

		}, options.frequency);

	};

})(jQuery);

调整点有：

增加speed参数，指的是每个雪花的生命周期时长
增加frequency参数，指的是每个雪花之间的间隔时长
增加easing参数，支持jquery-easing插件的所有动画，定义每个雪花的动画
增加position参数，支持雪花随屏幕下落

JS线上地址：http://s7.qhimg.com/!88157db8/jquery-plugin-snow.js

效果展示

另附带一个直接引用JS就可以的资源：http://s5.qhimg.com/static/5ebcf40d746a2dc0/snow/snow.src.js （canvas版本）

参考资料：

http://workshop.rs/2012/01/jquery-snow-falling-plugin/（原作者地址，稍作调整）

http://gsgd.co.uk/sandbox/jquery/easing/ （动画效果使用easing）

巴特西

【jquery插件】-网页下雪效果

最新文章

热门文章