夏日博客

A-A+

jquery网页下雪特效插件实例

2016年01月08日 前端设计 暂无评论 阅读 6 views 次

年底为了体现过年的气氛，很多网页会做各种喜气的特效，现在我们来学习一下jquery网页下雪特效插件，这样你的网页也可以有冬天的年味了。

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

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

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

经过调整的代码如下,上半部分为jquery-easing，下半部分为雪花效果.

  1. (function($){  
  2.     /* 
  3.  * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ 
  4.  * 
  5.  * Uses the built in easing capabilities added In jQuery 1.1 
  6.  * to offer multiple easing options 
  7.  * 
  8.  * TERMS OF USE - jQuery Easing 
  9.  * 
  10.  * Open source under the BSD License. 
  11.  * 
  12.  * Copyright © 2008 George McGinley Smith 
  13.  * All rights reserved. 
  14.  * 
  15.  * Redistribution and use in source and binary forms, with or without modification, 
  16.  * are permitted provided that the following conditions are met: 
  17.  * 
  18.  * Redistributions of source code must retain the above copyright notice, this list of 
  19.  * conditions and the following disclaimer. 
  20.  * Redistributions in binary form must reproduce the above copyright notice, this list 
  21.  * of conditions and the following disclaimer in the documentation and/or other materials 
  22.  * provided with the distribution. 
  23.  * 
  24.  * Neither the name of the author nor the names of contributors may be used to endorse 
  25.  * or promote products derived from this software without specific prior written permission. 
  26.  * 
  27.  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
  28.  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 
  29.  * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE 
  30.  *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 
  31.  *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE 
  32.  *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
  33.  * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 
  34.  *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
  35.  * OF THE POSSIBILITY OF SUCH DAMAGE. 
  36.  * 
  37. */  
  38.    
  39. // t: current time, b: begInnIng value, c: change In value, d: duration  
  40. jQuery.easing['jswing'] = jQuery.easing['swing'];  
  41.    
  42. jQuery.extend( jQuery.easing,  
  43. {  
  44.     def: 'easeOutQuad',  
  45.     swing: function (x, t, b, c, d) {  
  46.         //alert(jQuery.easing.default);  
  47.         return jQuery.easing[jQuery.easing.def](x, t, b, c, d);  
  48.     },  
  49.     easeInQuad: function (x, t, b, c, d) {  
  50.         return c*(t/=d)*t + b;  
  51.     },  
  52.     easeOutQuad: function (x, t, b, c, d) {  
  53.         return -c *(t/=d)*(t-2) + b;  
  54.     },  
  55.     easeInOutQuad: function (x, t, b, c, d) {  
  56.         if ((t/=d/2) < 1) return c/2*t*t + b;  
  57.         return -c/2 * ((--t)*(t-2) - 1) + b;  
  58.     },  
  59.     easeInCubic: function (x, t, b, c, d) {  
  60.         return c*(t/=d)*t*t + b;  
  61.     },  
  62.     easeOutCubic: function (x, t, b, c, d) {  
  63.         return c*((t=t/d-1)*t*t + 1) + b;  
  64.     },  
  65.     easeInOutCubic: function (x, t, b, c, d) {  
  66.         if ((t/=d/2) < 1) return c/2*t*t*t + b;  
  67.         return c/2*((t-=2)*t*t + 2) + b;  
  68.     },  
  69.     easeInQuart: function (x, t, b, c, d) {  
  70.         return c*(t/=d)*t*t*t + b;  
  71.     },  
  72.     easeOutQuart: function (x, t, b, c, d) {  
  73.         return -c * ((t=t/d-1)*t*t*t - 1) + b;  
  74.     },  
  75.     easeInOutQuart: function (x, t, b, c, d) {  
  76.         if ((t/=d/2) < 1) return c/2*t*t*t*t + b;  
  77.         return -c/2 * ((t-=2)*t*t*t - 2) + b;  
  78.     },  
  79.     easeInQuint: function (x, t, b, c, d) {  
  80.         return c*(t/=d)*t*t*t*t + b;  
  81.     },  
  82.     easeOutQuint: function (x, t, b, c, d) {  
  83.         return c*((t=t/d-1)*t*t*t*t + 1) + b;  
  84.     },  
  85.     easeInOutQuint: function (x, t, b, c, d) {  
  86.         if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;  
  87.         return c/2*((t-=2)*t*t*t*t + 2) + b;  
  88.     },  
  89.     easeInSine: function (x, t, b, c, d) {  
  90.         return -c * Math.cos(t/d * (Math.PI/2)) + c + b;  
  91.     },  
  92.     easeOutSine: function (x, t, b, c, d) {  
  93.         return c * Math.sin(t/d * (Math.PI/2)) + b;  
  94.     },  
  95.     easeInOutSine: function (x, t, b, c, d) {  
  96.         return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;  
  97.     },  
  98.     easeInExpo: function (x, t, b, c, d) {  
  99.         return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;  
  100.     },  
  101.     easeOutExpo: function (x, t, b, c, d) {  
  102.         return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;  
  103.     },  
  104.     easeInOutExpo: function (x, t, b, c, d) {  
  105.         if (t==0) return b;  
  106.         if (t==d) return b+c;  
  107.         if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;  
  108.         return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;  
  109.     },  
  110.     easeInCirc: function (x, t, b, c, d) {  
  111.         return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;  
  112.     },  
  113.     easeOutCirc: function (x, t, b, c, d) {  
  114.         return c * Math.sqrt(1 - (t=t/d-1)*t) + b;  
  115.     },  
  116.     easeInOutCirc: function (x, t, b, c, d) {  
  117.         if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;  
  118.         return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;  
  119.     },  
  120.     easeInElastic: function (x, t, b, c, d) {  
  121.         var s=1.70158;var p=0;var a=c;  
  122.         if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;  
  123.         if (a < Math.abs(c)) { a=c; var s=p/4; }  
  124.         else var s = p/(2*Math.PI) * Math.asin (c/a);  
  125.         return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;  
  126.     },  
  127.     easeOutElastic: function (x, t, b, c, d) {  
  128.         var s=1.70158;var p=0;var a=c;  
  129.         if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;  
  130.         if (a < Math.abs(c)) { a=c; var s=p/4; }  
  131.         else var s = p/(2*Math.PI) * Math.asin (c/a);  
  132.         return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;  
  133.     },  
  134.     easeInOutElastic: function (x, t, b, c, d) {  
  135.         var s=1.70158;var p=0;var a=c;  
  136.         if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);  
  137.         if (a < Math.abs(c)) { a=c; var s=p/4; }  
  138.         else var s = p/(2*Math.PI) * Math.asin (c/a);  
  139.         if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;  
  140.         return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;  
  141.     },  
  142.     easeInBack: function (x, t, b, c, d, s) {  
  143.         if (s == undefined) s = 1.70158;  
  144.         return c*(t/=d)*t*((s+1)*t - s) + b;  
  145.     },  
  146.     easeOutBack: function (x, t, b, c, d, s) {  
  147.         if (s == undefined) s = 1.70158;  
  148.         return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;  
  149.     },  
  150.     easeInOutBack: function (x, t, b, c, d, s) {  
  151.         if (s == undefined) s = 1.70158;  
  152.         if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;  
  153.         return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;  
  154.     },  
  155.     easeInBounce: function (x, t, b, c, d) {  
  156.         return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;  
  157.     },  
  158.     easeOutBounce: function (x, t, b, c, d) {  
  159.         if ((t/=d) < (1/2.75)) {  
  160.             return c*(7.5625*t*t) + b;  
  161.         } else if (t < (2/2.75)) {  
  162.             return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;  
  163.         } else if (t < (2.5/2.75)) {  
  164.             return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;  
  165.         } else {  
  166.             return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;  
  167.         }  
  168.     },  
  169.     easeInOutBounce: function (x, t, b, c, d) {  
  170.         if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;  
  171.         return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;  
  172.     }  
  173. });  
  174.    
  175. /* 
  176.  * 
  177.  * TERMS OF USE - EASING EQUATIONS 
  178.  * 
  179.  * Open source under the BSD License. 
  180.  * 
  181.  * Copyright © 2001 Robert Penner 
  182.  * All rights reserved. 
  183.  * 
  184.  * Redistribution and use in source and binary forms, with or without modification, 
  185.  * are permitted provided that the following conditions are met: 
  186.  * 
  187.  * Redistributions of source code must retain the above copyright notice, this list of 
  188.  * conditions and the following disclaimer. 
  189.  * Redistributions in binary form must reproduce the above copyright notice, this list 
  190.  * of conditions and the following disclaimer in the documentation and/or other materials 
  191.  * provided with the distribution. 
  192.  * 
  193.  * Neither the name of the author nor the names of contributors may be used to endorse 
  194.  * or promote products derived from this software without specific prior written permission. 
  195.  * 
  196.  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
  197.  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 
  198.  * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE 
  199.  *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 
  200.  *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE 
  201.  *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
  202.  * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 
  203.  *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
  204.  * OF THE POSSIBILITY OF SUCH DAMAGE. 
  205.  * 
  206.  */  
  207.    
  208.    
  209.     $.fn.snow = function(options){  
  210.         //处理浏览器  
  211.         var na = window.navigator;  
  212.         var ua = na.userAgent.toLowerCase();  
  213.         var browserTester = /(webkit|gecko|presto|opera|safari|firefox|chrome|applewebkit)[ /os]*([d_.]+)/ig  
  214.         if(!browserTester.test(ua)) {  
  215.             return;  
  216.         }  
  217.            
  218.         var winHeight = $(window).height();  
  219.         var docHeight = $(document).height();  
  220.         var docWidth = $(document).width();  
  221.         var defaults = {  
  222.             minSize: 20,        //雪花的最小尺寸  
  223.             maxSize: 50,        //雪花的最大尺寸  
  224.             speed: docHeight * 10, //雪花掉落速度  
  225.             frequency: 500,     //雪花出现的频率  
  226.             color: "#FFFFFF", //雪花颜色  
  227.             easing: 'linear', //雪花动画效果  
  228.             position: 'absolute' //定位方式  
  229.         };  
  230.         var options = $.extend({}, defaults, options);  
  231.         var $snow = $('<div>').css({'position': options.position, 'top': '-50px', 'z-index':9999999999}).html('❄');  
  232.         var height = options.position == "fixed" ? winHeight : docHeight;  
  233.         var width = docWidth;  
  234.            
  235.         $('body').css('overflow-x', 'hidden');  
  236.            
  237.         var interval = setInterval( function(){  
  238.             var startPositionLeft = Math.random() * width - 100;  
  239.             var startOpacity = 0.5 + Math.random();  
  240.             var size = options.minSize + Math.random() * options.maxSize;  
  241.             var endPositionTop = height - 40;  
  242.             var endPositionLeft = startPositionLeft + (Math.random()*10 > 5 ? -500 : 500);  
  243.    
  244.             $snow.clone().appendTo('body').css({  
  245.                         left: startPositionLeft,  
  246.                         opacity: startOpacity,  
  247.                         'font-size': size,  
  248.                         color: options.color  
  249.                     }).animate({  
  250.                         top: endPositionTop,  
  251.                         left: endPositionLeft,  
  252.                         opacity: 0.2  
  253.                     },options.speed, options.easing,function(){  
  254.                         $(this).remove()  
  255.                     }  
  256.                 );  
  257.                    
  258.         }, options.frequency);  
  259.        
  260.     };  
  261.        
  262. })(jQuery);  

调整点有:

增加speed参数，指的是每个雪花的生命周期时长

增加frequency参数，指的是每个雪花之间的间隔时长

增加easing参数，支持jquery-easing插件的所有动画，定义每个雪花的动画

增加position参数，支持雪花随屏幕下落

标签：

给我留言