jquery实现web页面樱花飘落特效

前端开发飘落特效 jquery

创建时间:2019-08-29 08:57

字数:261 阅读:

评论:

Cherry_Blossoms

Cherry_Blossoms

jquery实现web页面樱花坠落的特效（很浪漫哟）

源码地址

https://github.com/jingegebuguai/Cherry_Blossoms

开发工具

Jquery+webstorm,无需额外配置任何环境，移动端无法使用

效果演示

为了更加显眼，背景换成了黑色,gif图有些卡顿，实际效果比较流畅
效果详见Github

使用方法

在需要加入效果的页面加入html代码,位置最好放在body元素下第一个标签

<div class="cherry">
<img id="yinghua" src="../image/yinghua.png" alt="" >
</div>

导入一下js代码其中各变量可根据需要改变

$(function(){
      $('.cherry').Cherry_Blossoms({
          is_Cherry:true,//是否生成樱花
          image_min:10,//花瓣最小宽度和高度
          image_max:50,//花瓣最大宽度和高度
          time_min:10000,//花瓣最快下坠时间
          time_max:20000,//花瓣最慢下坠时间
          interval:500//花瓣生成时间间隔
      })
  })

js插件

IIFE（立即执行匿名函数）
$.extend(),扩展插件定义默认参数
randomNum（）设置[m,n]类型随机数

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以加QQ（2602138376）