摘要
分享一个花瓣飘落的特效,可以加到自己博客上再装点一下节日氛围。
【效果展示】
【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,在上面添加:
如果只想显示在首页,可以用下面的判断语句把上面的代码包裹起来: