前端花瓣飘落特效代码

最新推荐文章于 2023-03-16 21:08:25 发布

马子日

最新推荐文章于 2023-03-16 21:08:25 发布

阅读量5.8k

点赞数 10

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_46678271/article/details/112857679

版权

本文分享了如何在前端实现花瓣飘落特效，包括在页面中添加特定代码以及在js/snowfall.jquery.js文件中放入关键代码。

摘要由CSDN通过智能技术生成

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

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

<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