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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jQuery实现tab栏切换效果
Dec 22 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 强制下载文件代码
2010/10/24 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
python实现数组插入新元素的方法
2015/05/22 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
用Python读取几十万行文本数据
2018/12/24 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
最新远光软件笔试题面试题内容
2013/11/08 面试题
实习指导老师评语
2014/04/26 职场文书
校园演讲稿汇总
2014/05/21 职场文书
报到证办理个人委托书
2014/10/06 职场文书
皇城相府导游词
2015/02/06 职场文书