jQuery实现web页面樱花坠落的特效
时间:2019-03-30
本文章向大家介绍jQuery实现web页面樱花坠落的特效,主要包括jQuery实现web页面樱花坠落的特效使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
源码地址
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页面樱花坠落的特效,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- WordPress酷炫CSS3读者墙,排名按年度、本月、本周划分的小方法
- WordPress给文章添加百度是否已收录查询和显示功能(自定义栏目优化版)
- PHP制作百度站内搜索绿色通道的网页列表数据文件
- 分享几个可用的二维码API,以及给博客添加文章二维码图片的方法
- AI即开即用,这是悄然推出的“腾讯最新AI技术”小程序
- Android Linker 与 SO 加壳技术
- Go语言操作mysql数据库简单例子
- go语言的sql包原理与用法分析
- WordPress免插件生成完整站点地图(sitemap.xml)的php代码
- Go语言常用字符串处理方法实例汇总
- 硬盘故障时如何强制关机:Input/output error
- 举例讲解Go语言中函数的闭包使用
- 实现WordPress提交评论的时删除该页面的WP-Super-Cache缓存的方法
- php自动生成百度开放适配PC页-手机页pattern对应关系sitemap.xml
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在 minikube 上部署 knative
- 认识 JS 静态类型检查工具 Flow
- PostgreSQL中如何实现密码复杂度检查?
- JS/TS 对数组中的对象按对象的值进行去重
- JS/TS 对数组中的对象按相同值进行分组
- CSS 实现输入框从右往左和反向倒序输入
- SAP Spartacus PagelayoutComponent里的template
- Python实战 | 送亲戚,送长辈,月饼可视化大屏来帮忙!
- SAP Spartacus PagelayoutComponent里的section和slot
- SAP Spartacus ComponentData的提前subscription
- 如何在 SwiftUI 中使用手势
- jQuery 尺寸、位置操作
- SwiftUI:触控反馈
- .net core ef core 自动迁移,自动修改数据库
- 白话 CRC