摘要

分享一个花瓣飘落的特效，可以加到自己博客上再装点一下节日氛围。

【效果展示】

【PHP文件】

此处为隐藏的内容

发表评论并刷新，方可查看

以上代码保存为hua.php文件，图片居右显示。

【JS文件】

展开

if(!Date.now){Date.now=function(){return new Date().getTime()}}(function(){var vendors=["webkit","moz"];for(var i=0;i(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.xthis.target.y&&this.ythis.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*=0.5}ctx.fillStyle=defaults.flakeColor;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)+10&&colData[parseInt(curX)-1][parseInt(curY)+1]==undefined){this.x--}else{ctx.fillStyle=defaults.flakeColor;ctx.fillRect(curX,curY,this.size,this.size);colData[parseInt(curX)][parseInt(curY)]=1;this.reset()}}}}}}if(this.x+this.size>(elWidth)-widthOffset||this.x",{"class":"snowfall-canvas"}),collisionData=[];if(bounds.top-collectionHeight>0){$("body").append($canvas);$canvas.css({"position":options.flakePosition,"left":bounds.left+"px","top":bounds.top-collectionHeight+"px"}).prop({width:bounds.width,height:collectionHeight});for(var w=0;w

for(i=0;i

$(document).ready(function(){

$(document).snowfall({image:"https://s2.ax1x.com/2020/01/21/1FlaVK.png", flakeCount:20, minSpeed:1, minSize:8, maxSize:20,});

$(document).snowfall({image:"https://s2.ax1x.com/2020/01/21/1FltDx.png", flakeCount:20, minSpeed:1, minSize:8, maxSize:20,});

$(document).snowfall({image:"https://s2.ax1x.com/2020/01/21/1FlNb6.png", flakeCount:20, minSpeed:1, minSize:8, maxSize:20,});

$(document).snowfall({image:"https://s2.ax1x.com/2020/01/21/1FlYK1.png", flakeCount:20, minSpeed:1, minSize:8, maxSize:20,});

});

/*

参数说明：

image PNG图片地址

flakeCount 数量

minSpeed 速度

minSize 最小尺寸

maxSize 最大尺寸

*/

将以上代码保存为snowfall.js文件

【使用方法】

第一步，将"hua.php""snowfall.js"文件上传到当前主题根目录hua文件夹中

第二步，打开当前主题页脚模板footer.php，在上面添加：

如果只想显示在首页，可以用下面的判断语句把上面的代码包裹起来：