jQuery实现web页面樱花坠落的特效


Posted in jQuery onJune 01, 2017

源码地址

https://github.com/jingegebuguai/Cherry_Blossoms(求star)

开发原因

  • 上课看到一位女生桌面背景是一课樱花树,顿时产生了一个让樱花可以在web页面飞舞的想法,借此把这个插件献送给那位女同学;
  • 开发过焦点图,轮转图,瀑布流等应用插件,但是这类型插件还是第一次做,那个啥兴趣使然对吧;

开发工具

  • 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]类型随机数

以上所述是小编给大家介绍的jQuery实现web页面樱花坠落的特效,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery查找dom的几种方法效率详解
May 17 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jquery简易手风琴插件的封装
Oct 13 jQuery
jquery网页加载进度条的实现
Jun 01 #jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 #jQuery
jQuery实现动态删除LI的方法
May 30 #jQuery
jQuery异步提交表单实例
May 30 #jQuery
Angular2使用jQuery的方法教程
May 28 #jQuery
Jquery中attr与prop的区别详解
May 27 #jQuery
jQuery插件imgAreaSelect基础讲解
May 26 #jQuery
You might like
PHP 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
PHP连接access数据库
2008/03/27 PHP
PHP中函数内引用全局变量的方法
2008/10/20 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
javascript 写类方式之二
2009/07/05 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
初始Nodejs
2014/11/08 NodeJs
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
浅析PHP与Python进行数据交互
2018/05/15 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
做一个有道德的人演讲稿
2014/05/14 职场文书
地震捐款倡议书
2014/08/29 职场文书
2014年稽查工作总结
2014/12/20 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js
Golang bufio详细讲解
2022/04/21 Golang