jquery实现web页⾯樱花坠落的特效(很浪漫哟)
Cherry_Blossoms
jquery实现web页⾯樱花坠落的特效(很浪漫哟)
源码地址
开发原因
上课看到⼀位⼥⽣桌⾯背景是⼀课樱花树,顿时产⽣了⼀个让樱花可以在web页⾯飞舞的想法,借此把这个插件献送给那位⼥同学;
开发过焦点图,轮转图,瀑布流等应⽤插件,但是这类型插件还是第⼀次做,那个啥兴趣使然对吧;
开发⼯具
Jquery+webstorm,⽆需额外配置任何环境,移动端⽆法使⽤
效果演⽰
为了更加显眼,背景换成了⿊⾊,gif图有些卡顿,实际效果⽐较流畅
效果详见
使⽤⽅法
在需要加⼊效果的页⾯加⼊html代码,位置最好放在body元素下第⼀个标签
<div class="cherry">
<img id="yinghua" src="../image/yinghua.png" alt="" >
</div>
jquery免费特效下载导⼊⼀下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]类型随机数
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论