在jQuery中如何实现下雪Animation动画效果的实现

来源：蜘蛛抓取(WebSpider) 时间：2018-08-19 03:58 标签： qt实现动画效果
网页下雪动画背景代码
相关最新源码
网页下雪动画背景代码基于snowfall.jquery.js和jquery-1.7.1.min.js制作，有圆角、阴影、圆润阴影、雪集合、Deviceorientation等多种网页下雪特效。
&&&&&&&&&&&&&&&&&&&&&&&&&
源码下载地址HTML5 canvas炫酷3D雪花飘落特效
当前位置： >
HTML5 canvas炫酷3D雪花飘落特效
nice-Snowing是一款使用HTML5 canvas制作的效果非常炫酷的3D雪花飘落特效插件。该雪花飘落特效使用不同的canvas来制作不同层次的雪花效果，使整个下雪场景具有明显的3D空间层次感，使下雪效果更加真实。
浏览器兼容性
nice-Snowing是一款使用 制作的效果非常炫酷的3D雪花飘落特效插件。该雪花飘落特效使用不同的来制作不同层次的雪花效果，使整个下雪场景具有明显的3D空间层次感，使下雪效果更加真实。
使用该雪花飘落特效首先要引入和snow-plugin.js文件。
&script src="js/jquery.min.js" type="text/javascript"&&/script&
&script src="js/snow-plugin.js"&&/script&
&canvas class="snow-canvas" speed="1" interaction="false" size="2" count="80" opacity="0.00001" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" wind-power="0" image="false" width="1366" height="667"&&/canvas&
&canvas class="snow-canvas" speed="2" interaction="true" size="6" count="30" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" opacity="0.00001" wind-power="2" image="false" width="1366" height="667"&&/canvas&
&canvas class="snow-canvas" speed="3" interaction="true" size="12" count="20" wind-power="-5" image="snow.png" width="1366" height="667"&&/canvas&
如果需要使用雪花图片，可以在image属性中设置，否则设置为false。不使用图片时要设置雪花的开始色start-color，结束色end-color和透明度等属性。
初始化插件
$(".snow-canvas").snow();
该插件可以在IE6+浏览器中正常运行，在IE6浏览器中使用&img&来替代canvas。
本文版权属于jQuery之家，转载请注明出处：
您已经顶过了哦！jQuery实现的圣诞下雪动画特效源码
脚本大小：35KB
脚本语言：简体中文
脚本类型：
脚本授权：免费软件
更新时间：
脚本类别：jQuery
相关链接：
未知官方&&
网友评分：
应用平台：
2MB | 英文软件
4.9MB | 简体中文
1.5MB | 简体中文
39.9KB | 简体中文
561KB | 简体中文
40KB | 英文软件
389KB | 简体中文
78KB | 英文软件
20KB | 简体中文
下载错误？
jQuery实现的圣诞下雪动画特效源码当前位置 :
使用邮箱登录17素材
已连续签到1天,签到3天将获得积分VIP1天一年一度的圣诞节又到了，首先祝大家好运一串串，健康一年年，平安到永远！在这个特殊的日子里，处处洋溢着节日的气氛，空中飘落的雪花更显得浪漫！今天就教大家如何在博客中添加纷纷扬扬的下雪效果。今天，你那里下雪了吗？
　　首先在页面引入 jQuery 库和 jQuery.snow.js（或者使用压缩版本 jQuery.snow.min.js）：
&script&src="jquery.js"&&/script&
&script&src="jquery.snow.js"&&/script&
　　博客园的朋友可以不用引入 jQuery，因为博客园自身已经引入了。不是博客园的朋友也可以引用 Goolgle CDN 提供的 jQuery：
&script&src=""&&/script&
&script&src="jquery.snow.js"&&/script&
　　然后在页面文档的任何地方调用下雪插件就可以了：
$(document).ready( function(){
&&&&&&&&$.fn.snow();
　　你也可以根据自己的喜好设置插件提供的参数来调整下雪的效果：
flakeColor
　　例如可以传递下面这样形式的参数：
$.fn.snow({
&&&&minSize: 5,
&&&&maxSize: 50,
&&&&newOn: 1000,
&&&&flakeColor: '#0099FF'
　　newOn 参数值越小，效果越好，但是设置过小的话可能会有性能问题，比较耗资源。
　　最后向大家简单介绍一下这个下雪效果实现的要点：
使用字符&? 作为雪花，Unicode 编码是：❄，因此雪花的大小和颜色控制其实就是设置 font-size 和 color 属性。
使用 setInterval 周期性生成雪花，频率使用&newOn 控制。
　　下面是下雪插件的完整代码：
　　园子里的朋友只要把下面代码添加到（管理-》设置-》页脚HTML代码）中就可以了，非简单！
　　温馨提示：因为会被转义，这里给雪花编码加个空格，使用的时候记得把html('& #10052;') 的& #间空格去掉啊。
(function($){$.fn.snow=function(options){var $flake=$('&div&id="flake"&/&').css({'position':'absolute','top':'-50px'}).html('& #10052;'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"},options=$.extend({},defaults,options);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);};})(jQuery);
$.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#FFF' });
您可能感兴趣相关文章
本文链接：
编译来源：
推荐阅读 ◆ 最受欢迎的文章
作者：&出处：&记住啦：）&欢迎任何形式的转载，但请务必注明出处。
阅读(...) 评论()
随笔 - 16726
评论 - 1641

我要回帖

更多关于 qt实现动画效果 的文章

 

随机推荐