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

  1. Cherry_Blossoms
    1. 源码地址
    2. 开发工具
    3. 效果演示
    4. 使用方法
    5. js插件

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)

文章标题:jquery实现web页面樱花飘落特效

文章字数:261

本文作者:Zevs

发布时间:2019-08-29, 08:57:09

最后更新:2019-08-29, 09:00:05

原始链接:http://zhsh666.xyz/2019/08/29/jquery实现web页面樱花飘落特效/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏

相册 图床 主题切换