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

超文本标记语言部分：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta name=' viewport ' content=' width=device-width，initial-scale=1.0，minimum-scale=0.5，maximum-scale=2.0，user-scalable=yes '/script src=' http 3360http://libs。百度。com/jquery/2 .-snow-script src=' http : js/jquery。下雪了。js '/script/head body div id=' content-wrapper ' div class=' inner clear fix ' section id=' main-content ' img src=' http : images/merry _ christmasa。jpg ' alt=' Chrismas '/section/div/div脚本$(文档)。ready(function(){ $)。fn。snow({ minsize : 2，maxSize: 150，newOn: 200，flakee color : ' # FFFFFF ' })；});/script/body/html jquery。下雪了。js :

/*** jquery.snow - jQuery雪效果插件* *在麻省理工学院许可下提供* * @版本1 (21。2012年一月)* @作者伊万拉扎列维奇* @需要jQuery * @参见http://车间。RS * * @ params minSize-雪花的最小尺寸，默认为10 * @ params maxSize-雪花的最大尺寸，默认为20 * @ params newOn-新雪花出现的频率（毫秒),默认为500 * @ params flack color-雪花的颜色，#FFFFFF默认为* @示例$。fn。snow({ maxSize 3360 200，new : */(函数($){ $.fn.snow=函数（选项){ var $flake=$('div id='flake' /').css({'position': 'absolute '，' top': '-50px'}).html(" ")，documentHeight=$(文档)。高度(),文档宽度=$(文档)。宽度()，默认值={ minSize : 10，maxSize : 20，newOn : 500，flakeColor : ' # FFFFFF ' }，选项=$。扩展({}，默认值，选项);//设置间隔-设置间隔()方法可按照指定的周期（以毫秒计)来调用函数或计算表达式。 //开始一个周期-开始添加雪花var区间=set区间(function(){ var startPositionLeft=math。random()*文档宽度-100，startOpacity=0.5 Math.random()，sizeFlake=options。明泽数学。random()*选项。maxsize，endPositionTop=文档高度-40，end positionleft=start positionleft-100数学。random()* 200，durationFall=文档高度* 10数学。random()* 5000；$flake .克隆()。appendTo("正文")。CSS({ left : startPositionLeft，opacity: startOpacity，' font-size': sizeFlake，color :选项。片状ecolor }).动画(//增加雪花动态效果{ top: endPositionTop，left: endPositionLeft，opacity: 0.2 }，durationFall，“linear”，function() { $(this).remove()})；}，选项。NewOn)；//结束周期-停止添加雪花setTimeout(函数(){ window.clearInterval(区间));},5000);};})(jQuery)；不需要钢性铸铁样式

主要用到：设置间隔-设置间隔()方法可按照指定的周期（以毫秒计)来调用函数或计算表达式动画制作。动画

运行效果：

附：完整实例代码点击此处本站下载。

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。