当前位置：首页 > 资讯 > 技术文档

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

时间：2020-02-19 09:05 编辑：来源：阅读：
扫一扫，手机访问

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

源码地址 [url=https://github.com/jingegebuguai/Cherry_Blossoms]https://github.com/jingegebuguai/Cherry_Blossoms[/url]（求star） [b]开发原因[/b] [list] [*]上课看到一位女生桌面背景是一课樱花树，顿时产生了一个让樱花可以在web页面飞舞的想法，借此把这个插件献送给那位女同学；[/*] [*]开发过焦点图，轮转图，瀑布流等应用插件，但是这类型插件还是第一次做，那个啥兴趣使然对吧；[/*] [/list] [b]开发工具[/b] [list] [*]Jquery+webstorm,无需额外配置任何环境，移动端无法使用[/*] [/list] [b]效果演示[/b] 为了更加显眼，背景换成了黑色,gif图有些卡顿，实际效果比较流畅效果详见[url=https://github.com/jingegebuguai/Cherry_Blossoms]Github[/url] 使用方法 [list] [*]在需要加入效果的页面加入html代码,位置最好放在body元素下第一个标签[/*] [/list]

<div class="cherry">
<img id="yinghua" src="../image/yinghua.png" alt="" >
</div>

[list] [*]导入一下js代码其中各变量可根据需要改变[/*] [/list]

$(function(){
   $('.cherry').Cherry_Blossoms({
     is_Cherry:true,//是否生成樱花
     image_min:10,//花瓣最小宽度和高度
     image_max:50,//花瓣最大宽度和高度
     time_min:10000,//花瓣最快下坠时间
     time_max:20000,//花瓣最慢下坠时间
     interval:500//花瓣生成时间间隔
   })
 })

[b]js插件[/b] [list] [*]IIFE（立即执行匿名函数）[/*] [*]$.extend(),扩展插件定义默认参数[/*] [*]randomNum（）设置[m,n]类型随机数[/*] [/list] 以上所述是小编给大家介绍的jQuery实现web页面樱花坠落的特效，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：Replace中的正则表达式
下一篇：正则表达式学习笔记

资讯排行榜
更多>>