前端花瓣飘落特效代码

前端花瓣飘落特效代码来了，直接复制粘贴上

首先在想要特效的页面加上下面的代码

<div style="height:100%;
width:100%;display: none;">
七夕情人节花瓣飘落</div>
<script src="js/snowfall.jquery.js">
</script>

再在js里面建一个名为js/snowfall.jquery.js的文件夹，再复制粘贴以下代码进去

(function(){var lastTime=0;
var vendors=['webkit','moz'];
for(var x=0;
x<vendors.length&&!window.requestAnimationFrame;++x)
{window.requestAnimationFrame=window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame=window[vendors[x]+'CancelAnimationFrame']||window[vendors[x]+'CancelRequestAnimationFrame'];
}
if(!window.requestAnimationFrame)window.requestAnimationFrame=function(callback,element){var currTime=new Date().getTime();
var timeToCall=Math.max(0,16-(currTime-lastTime));
var id=window.setTimeout(function(){callback(currTime+timeToCall);
},timeToCall);
lastTime=currTime+timeToCall;
return id;
};
if(!window.cancelAnimationFrame)window.cancelAnimationFrame=function(id){clearTimeout(id);
};
}());
(function($){$.snowfall=function(element,options)
{var defaults=
{flakeCount:35,
flakeColor:'#ffffff',
flakePosition:'absolute',
flakeIndex:999999,
minSize:1,maxSize:2,minSpeed:1,
maxSpeed:5,round:false,
shadow:false,collection:false,
collectionHeight:40,
deviceorientation:false},
options=$.extend(defaults,options),
random=function random(min,max){return Math.round(min+Math.random()*
(max-min));
};
$(element).data("snowfall",this);
function Flake(_x,_y,_size,_speed,_id)
{this.id=_id;this.x=_x;this.y=_y;this.s
ize=_size;this.speed=_speed;this.step=0
;this.stepSize=random(1,10)/100;if(opti
ons.collection)
{this.target=canvasCollection[random(0,
canvasCollection.length-1)];}
var flakeMarkup=null;
if(options.image)
{flakeMarkup=$(document.createElement("img"));flakeMarkup[0].src=options.image;}else
{flakeMarkup=$(document.createElement("div"));flakeMarkup.css({'background':options.flakeColor});}
flakeMarkup.attr({'class':'snowfall-flakes','id':'flake-'+this.id}).css({'width':this.size,'height':this.size,'position':options.flakePosition,'top':this.y,'left':this.x,'fontSize':0,'zIndex':options.flakeIndex});if($(element).get(0).tagName===$(document).get(0).tagName){$('body').append(flakeMarkup);element=$('body');}else{$(element).append(flakeMarkup);}this.element=document.getElementById('flake-'+this.id);this.update=function(){this.y+=this.speed;if(this.y>(elHeight)-(this.size+6)){this.reset();}this.element.style.top=this.y+'px';this.element.style.left=this.x+'px';this.step+=this.stepSize;if(doRatio===false){this.x+=Math.cos(this.step);}else{this.x+=(doRatio+Math.cos(this.step));}if(options.collection){if(this.x>this.target.x&&this.x<this.target.width+this.target.x&&this.y>this.target.y&&this.y<this.target.height+this.target.y){var ctx=this.target.element.getContext("2d"),curX=this.x-this.target.x,curY=this.y-this.target.y,colData=this.target.colData;if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)]!==undefined||curY+this.speed+this.size>this.target.height){if(curY+this.speed+this.size>this.target.height){while(curY+this.speed+this.size>this.target.height&&this.speed>0){this.speed*=.5;}ctx.fillStyle="#fff";if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)]==undefined){colData[parseInt(curX)][parseInt(curY+this.speed+this.size)]=1;ctx.fillRect(curX,(curY)+this.speed+this.size,this.size,this.size);}else{colData[parseInt(curX)][parseInt(curY+this.speed)]=1;ctx.fillRect(curX,curY+this.speed,this.size,this.size);}this.reset();}else{this.speed=1;this.stepSize=0;if(parseInt(curX)+1<this.target.width&&colData[parseInt(curX)+1][parseInt(curY)+1]==undefined){this.x++;}else if(parseInt(curX)-1>0&&colData[parseInt(curX)-1][parseInt(curY)+1]==undefined){this.x--;}else{ctx.fillStyle="#fff";ctx.fillRect(curX,curY,this.size,this.size);colData[parseInt(curX)][parseInt(curY)]=1;this.reset();}}}}}if(this.x>(elWidth)-widthOffset||this.x<widthOffset){this.reset();}}this.reset=function(){this.y=0;this.x=random(widthOffset,elWidth-widthOffset);this.stepSize=random(1,10)/100;this.size=random((options.minSize*100),(options.maxSize*100))/100;this.speed=random(options.minSpeed,options.maxSpeed);}}var flakes=[],flakeId=0,i=0,elHeight=$(element).height(),elWidth=$(element).width(),widthOffset=0,snowTimeout=0;if(options.collection!==false){var testElem=document.createElement('canvas');if(!!(testElem.getContext&&testElem.getContext('2d'))){var canvasCollection=[],elements=$(options.collection),collectionHeight=options.collectionHeight;for(var i=0;i<elements.length;i++){var bounds=elements[i].getBoundingClientRect(),canvas=document.createElement('canvas'),collisionData=[];if(bounds.top-collectionHeight>0){document.body.appendChild(canvas);canvas.style.position=options.flakePosition;canvas.height=collectionHeight;canvas.width=bounds.width;canvas.style.left=bounds.left+'px';canvas.style.top=bounds.top-collectionHeight+'px';for(var w=0;w<bounds.width;w++){collisionData[w]=[];}canvasCollection.push({element:canvas,x:bounds.left,y:bounds.top-collectionHeight,width:bounds.width,height:collectionHeight,colData:collisionData});}}}else{options.collection=false;}}if($(element).get(0).tagName===$(document).get(0).tagName){widthOffset=25;}$(window).bind("resize",function(){elHeight=$(element)[0].clientHeight;elWidth=$(element)[0].offsetWidth;});for(i=0;i<options.flakeCount;i+=1){flakeId=flakes.length;flakes.push(new Flake(random(widthOffset,elWidth-widthOffset),random(0,elHeight),random((options.minSize*100),(options.maxSize*100))/100,random(options.minSpeed,options.maxSpeed),flakeId));}if(options.round){$('.snowfall-flakes').css({'-moz-border-radius':options.maxSize,'-webkit-border-radius':options.maxSize,'border-radius':options.maxSize});}if(options.shadow){$('.snowfall-flakes').css({'-moz-box-shadow':'1px 1px 1px #555','-webkit-box-shadow':'1px 1px 1px #555','box-shadow':'1px 1px 1px #555'});}var doRatio=false;if(options.deviceorientation){$(window).bind('deviceorientation',function(event){doRatio=event.originalEvent.gamma*0.1;});}function snow(){for(i=0;i<flakes.length;i+=1){flakes[i].update();}snowTimeout=requestAnimationFrame(function(){snow()});}snow();this.clear=function(){$(element).children('.snowfall-flakes').remove();flakes=[];cancelAnimationFrame(snowTimeout);}};$.fn.snowfall=function(options){if(typeof(options)=="object"||options==undefined){return this.each(function(i){(new $.snowfall(this,options));});}else if(typeof(options)=="string"){return this.each(function(i){var snow=$(this).data('snowfall');if(snow){snow.clear();}});}};})(jQuery);

前端花瓣飘落特效代码相关推荐

php花朵飘落特效,【新年气象】WordPress 主题添加花瓣飘落特效
摘要分享一个花瓣飘落的特效,可以加到自己博客上再装点一下节日氛围. [效果展示] [PHP文件] 此处为隐藏的内容发表评论并刷新,方可查看以上代码保存为hua.php文件,图片居右显示. [JS ...
php花朵飘落特效,WordPress 主题添加花瓣飘落特效
上篇文章过年啦,挂灯笼!教大家在博客上挂个动画灯笼,可能大家认为很好玩,那就再分享一个花瓣飘落的特效,可以加到自己博客上再装点一下节日氛围. 先贴一下代码,下面有打包的文件下载.// 封装代码 fun ...
2花瓣html,html花瓣飘落特效_520情侣浪漫表白JS特效分享（附源码）
520要来了,为回馈朋友们所有专栏8折优惠,感兴趣的朋友可以订阅,感谢大家的支持! 520马上就要到,作为程序员的你是不是也想送个特别的礼物.今天给大家分享一个HTML5+CSS3+jQuery实现的 ...
雪花飘落代码java_JS实现的雪花飘落特效示例
本文实例讲述了JS实现的雪花飘落特效.分享给大家供大家参考,具体如下: 首先我们要创建一个HTML文件,将其命名为index.html Canvas - 雪花特效 *{ margin:0px; pad ...
html页面飘落花瓣不是全屏,jQuery css3全屏花瓣飘落动画特效
特效描述:jQuery css3 全屏花瓣飘落动画特效.jQuery css3从上往下飘落爱心花瓣动画特效.(不兼容IE6,7,8) 代码结构 1. 引入JS 2. HTML代码 $(functio ...
python做花瓣飘落的背景_jquery+css3实现网页背景花瓣随机飘落特效
飘花效果的实现--效果图: 需求: 一个jquery,,,这个看标题么就知道了 jQuery Transit还有这个东西 jquery对一些效果的扩展飘花的效果稍微复杂一点,有一定量的JavaScr ...
python做花瓣飘落的背景_JavaScript_jquery+css3实现网页背景花瓣随机飘落特效，飘花效果的实现——效果图： - phpStudy...
jquery+css3实现网页背景花瓣随机飘落特效飘花效果的实现--效果图: 查看演示源码下载需求: 一个jquery,,,这个看标题么就知道了 jQuery Transit还有这个东西 jq ...
php 飘花特效,jquery+css3实现网页背景花瓣随机飘落特效_javascript技巧
飘花效果的实现--效果图: 需求: 一个jquery,,,这个看标题么就知道了 jQuery Transit还有这个东西 jquery对一些效果的扩展飘花的效果稍微复杂一点,有一定量的JavaScr ...
HTML5花瓣飘落动画js特效canvas
下载地址 HTML5花瓣飘落动画特效,canvas实现的炫酷动态网页背景. dd:
JS实现逼真的雪花飘落特效
逼真的雪花飘落特效效果图: 图片素材 : --> ParticleSmoke.png 代码如下,复制即可使用: <!doctype html> <html> <h ...

前端花瓣飘落特效代码

前端花瓣飘落特效代码来了，直接复制粘贴上

首先在想要特效的页面加上下面的代码

再在js里面建一个名为js/snowfall.jquery.js的文件夹，再复制粘贴以下代码进去

前端花瓣飘落特效代码相关推荐

最新文章

热门文章