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 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 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实现检查文章是否被百度收录
2015/01/27 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
详解Python中的join()函数的用法
2015/04/07 Python
python操作redis方法总结
2018/06/06 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
python颜色随机生成器的实例代码
2020/01/10 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
客户服务经理岗位职责
2014/01/29 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
小学校本教研总结
2015/08/13 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android