html设置樱花飘落效果,jQuery实现web页面樱花坠落的特效
源码地址
开发原因
上课看到一位女生桌面背景是一课樱花树,顿时产生了一个让樱花可以在web页面飞舞的想法,借此把这个插件献送给那位女同学;
开发过焦点图,轮转图,瀑布流等应用插件,但是这类型插件还是第一次做,那个啥兴趣使然对吧;
开发工具
Jquery+webstorm,无需额外配置任何环境,移动端无法使用
效果演示
为了更加显眼,背景换成了黑色,gif图有些卡顿,实际效果比较流畅
使用方法
在需要加入效果的页面加入html代码,位置最好放在body元素下第一个标签
导入一下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页面樱花坠落的特效,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
html设置樱花飘落效果,jQuery实现web页面樱花坠落的特效相关推荐
- html页面散落樱花原理,jQuery实现Web页面樱花坠落的特效_亦心_前端开发者
源码地址 https://github.com/jingegebuguai/Cherry_Blossoms(求star) 开发原因 上课看到一位女生桌面背景是一课樱花树,顿时产生了一个让樱花可以在 效 ...
- 如何把python可视化到前端_python数据可视化的效果如何在web页面中展示_北京可视化股票...
有什么APP可以展示可视化的任务进度 可视化任务进度软件,使用敬业签,具体可视有事项开始时间,进度及人.还有结束时间以及人员处理速等等,更多功能如下: 1.敬业签是一款功能比较全面的桌面便签软件,分为 ...
- html中背景条纹效果,CSS制作Web页面条纹背景样式的技巧分享
通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果,这里我们就了解CSS制作Web页面条纹背景样式的技巧分享,需要的朋友可以参考下 一.横向条纹如下代码:background ...
- js html页面切换效果,jQuery实现切换页面过渡动画效果
这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效 ...
- 工具人(超级赛亚人)学长写给超级可爱学妹的web简单课设(css3 动画 + 简单樱花飘落效果)
就是老工具人了. 学校web初级课程设计. 大概构思加完成1.5小时. 就这样. 大家想看拿走. 附上git地址:git地址,打包带走 部分页面效果展示: 只是一个简单web课程,后续会上传 雪花飘落 ...
- 樱花飘落效果,可附带祝福语~
效果图如下 视频地址: 樱花效果 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><H ...
- html从零开始——为网页加入樱花飘落效果
JavaScript代码: var stop, staticx;var img = new Image();img.src = "data:image/png;base64,iVBORw0K ...
- html5立体照片墙效果,jQuery超酷3D网格照片墙动画特效 -HTML5功能
作为网格容器,和一个按钮来触发动画效果. Animate CSS样式 在网格容器上设置了固定的宽度和高度,为了制作3D效果,还设置了perspective: 500px;.每一张图片也设置了固定的宽度 ...
- html 网页跳转动画效果,jQuery实现切换页面过渡动画效果_jquery
直接为大家介绍制作过程,希望大家可以喜欢. HTML结构 该页面切换特效的HTML结构使用一个元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-l ...
最新文章
- HDU 1245 Saving James Bond
- java方便适配器,JAXB简单自定义适配器以及简单使用
- 【Prometheus 】 Blackbox_exporter 指标 probe_http_duration_seconds
- [云炬ThinkPython阅读笔记]3.3 构建
- Kibana 创建索引 POST 403 (forbidden) on create index
- LeetCode 1273. 删除树节点(拓扑排序/DFS)
- python转义引号的作用_python传到前端的数据,双引号被转义的问题
- 关于RAM的空间使用超过限度的时候报错
- 比特币里面有哪些天才的设计?
- %02 java_Java基础02—变量、运算符和数据类型转换(示例代码)
- [家里蹲大学数学杂志]第392期中山大学2015年泛函分析考博试题回忆版
- php 修复excel 乱码,php下载excel乱码的解决方法
- 区块链开源代码什么意思_区块链可以从开源中学到什么
- Bing的高级搜索关键字
- 牛文文点评长租公寓行业:过度金融化会毁灭整个行业
- C盘清理的五大技巧,瞬间多出30G
- 十四.ARM裸机学习之iNand详解
- [分享] 新书推荐 -《黑莓(BlackBerry)开发从入门到精通》 | 黑莓时光
- c语言expand函数,练习 3-3 编写函数expand(s1, s2) (C语言 + 详细注释)
- LVGL支持中文字体实践指南