jQuery实现的下雪动画效果示例【附源码下载】

时间：2019-01-08分类：jQuery作者：佚名

本文实例讲述了jQuery实现的下雪动画效果。分享给大家供大家参考，具体如下：

html部分：

rush:js;">

jquery.sNow.js:

rush:js;"> /** * jquery.sNow - jQuery SNow Effect Plugin * * Available under MIT licence * * @version 1 (21. Jan 2012) * @author Ivan Lazarevic * @requires jQuery * @see http://workshop.rs * * @params minSize - min size of sNowflake,10 by default * @params maxSize - max size of sNowflake,20 by default * @params newOn - frequency in ms of appearing of new sNowflake,500 by default * @params flakeColor - color of sNowflake,#FFFFFF by default * @example $.fn.sNow({ maxSize: 200,newOn: 1000 }); */ (function($){ $.fn.sNow = function(options){ var $flake = $('

').css({'position': 'absolute','top': '-50px'}).html('❄'),documentHeight = $(document).height(),documentWidth = $(document).width(),defaults = { minSize : 10,maxSize : 20,newOn : 500,flakeColor : "#FFFFFF" },options = $.extend({},defaults,options); //setInterval-setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 //开始一个周期-开始添加雪花 var interval = setInterval( function(){ var startPositionLeft = Math.random() * documentWidth - 100,startOpacity = 0.5 + Math.random(),sizeflake = options.minSize + Math.random() * options.maxSize,endPositionTop = documentHeight - 40,endPositionLeft = startPositionLeft - 100 + Math.random() * 200,durationFall = documentHeight * 10 + Math.random() * 5000; $flake .clone() .appendTo('body') .css( { left: startPositionLeft,opacity: startOpacity,'font-size': sizeflake,color: options.flakeColor } ) .animate(//增加雪花动态效果 { top: endPositionTop,left: endPositionLeft,opacity: 0.2 },durationFall,'linear',function() { $(this).remove() } ); },options.newOn); //结束周期-停止添加雪花 setTimeout(function(){ window.clearInterval(interval); },5000); }; })(jQuery);

不需要css样式

主要用到：setInterval-setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。& animate动画

运行效果：