├── yinghua.gif ├── image ├── yinghua.jpg └── yinghua.png ├── css └── yinghua.css ├── html └── yinghua.html ├── README.md └── js └── yinghua.js /yinghua.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jingegebuguai/Cherry_Blossoms/HEAD/yinghua.gif -------------------------------------------------------------------------------- /image/yinghua.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jingegebuguai/Cherry_Blossoms/HEAD/image/yinghua.jpg -------------------------------------------------------------------------------- /image/yinghua.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jingegebuguai/Cherry_Blossoms/HEAD/image/yinghua.png -------------------------------------------------------------------------------- /css/yinghua.css: -------------------------------------------------------------------------------- 1 | body{ 2 | /*max-width:100%;*/ 3 | background: black; 4 | box-sizing: border-box; 5 | } 6 | img{ 7 | width:50px; 8 | height:50px; 9 | margin-top:-5%; 10 | opacity: 0.5; 11 | position: absolute; 12 | z-index: 99; 13 | /*-webkit-transform:rotate3d(.6,1,.6,45deg);*/ 14 | /*-moz-transform:rotate3d(.6,1,.6,45deg);*/ 15 | /*-ms-transform:rotate3d(.6,1,.6,45deg);*/ 16 | /*-o-transform:rotate3d(.6,1,.6,45deg);*/ 17 | /*transform:rotate3d(.6,1,.6,45deg);*/ 18 | 19 | } -------------------------------------------------------------------------------- /html/yinghua.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

6 |

7 |

8 | 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Cherry_Blossoms 2 | jquery实现web页面樱花坠落的特效 3 | 4 | ## 开发原因 5 | - 上课看到一位女生桌面背景是一课樱花树，顿时产生了一个让樱花可以在web页面飞舞的想法； 6 | - 开发过焦点图，轮转图，瀑布流等应用插件，但是这类型插件还是第一次做，那个啥兴趣使然对吧； 7 | ## 开发工具 8 | - Jquery+webstorm,无需额外配置任何环境，移动端无法使用 9 | 10 | ## 效果演示 11 | 为了更加显眼，背景换成了黑色,gif图有些卡顿，实际效果比较流畅 12 | ![image](https://github.com/jingegebuguai/Cherry_Blossoms/blob/master/yinghua.gif) 13 | 14 | ## 使用方法 15 | - 在需要加入效果的页面加入html代码,位置最好放在body元素下第一个标签 16 | 17 | ``` 18 |

19 |

20 |

21 | ``` 22 | 23 | - 导入一下js代码其中各变量可根据需要改变 24 | 25 | ``` 26 | $(function(){ 27 | $('.cherry').Cherry_Blossoms({ 28 | is_Cherry:true,//是否生成樱花 29 | image_min:10,//花瓣最小宽度和高度 30 | image_max:50,//花瓣最大宽度和高度 31 | time_min:10000,//花瓣最快下坠时间 32 | time_max:20000,//花瓣最慢下坠时间 33 | interval:500//花瓣生成时间间隔 34 | }) 35 | }) 36 | ``` 37 | 38 | ## js插件 39 | - IIFE（立即执行匿名函数） 40 | - $.extend(),扩展插件定义默认参数 41 | - randomNum（）设置[m,n]类型随机数 42 | -------------------------------------------------------------------------------- /js/yinghua.js: -------------------------------------------------------------------------------- 1 | /** 2 | * IIFE 3 | */ 4 | $(function() { 5 | $.fn.Cherry_Blossoms=function (params) { 6 | return this.each(function () { 7 | //设置默认值 8 | var defaults={ 9 | ele:'.cherry',//切换对象 10 | is_Cherry:true,//是否生成樱花 11 | image_min:10,//花瓣最小宽度和高度 12 | image_max:50,//花瓣最大宽度和高度 13 | time_min:10000,//花瓣最快下坠时间 14 | time_max:20000,//花瓣最慢下坠时间 15 | interval:500//花瓣生成时间间隔 16 | }; 17 | //定义默认参数，其中若在html页面设置了param是，这里的params会替换defaults 18 | var par = $.extend({}, defaults, params); 19 | /** 20 | * [m,n]随机数函数 21 | */ 22 | function randomNum(minNum, maxNum) { 23 | switch (arguments.length) { 24 | case 1: 25 | return parseInt(Math.random() * minNum + 1, 10); 26 | break; 27 | case 2: 28 | return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); 29 | break; 30 | default: 31 | return 0; 32 | break; 33 | } 34 | } 35 | 36 | /** 37 | * 生成樱花花瓣 38 | */ 39 | if(par.is_Cherry) { 40 | setInterval(function () { 41 | var time;//下落的持续时间，取随机数 42 | var image_daxiao;//花瓣大小取随机数 43 | var margin_left;//花瓣所在位置，取随机数 44 | margin_left = randomNum(5, 100); 45 | time = randomNum(par.time_min, par.time_max); 46 | console.log(time); 47 | image_daxiao = randomNum(par.image_min, par.image_max); 48 | console.log(image_daxiao); 49 | $('#yinghua:last-child').after('

'); 50 | $('#yinghua:last-child').css({ 51 | 'margin-left': margin_left + '%', 52 | 'width': image_daxiao + 'px', 53 | 'height': image_daxiao + 'px' 54 | }); 55 | $('#yinghua:last-child').animate({ 56 | left: -15 + '%', 57 | top: 100 + '%', 58 | deg: -540 59 | }, 60 | { 61 | step: function (deg) { 62 | //console.log(deg); 63 | $(this).css({"transform": "rotate3d(1,.2,0," + deg + "deg)"}); 64 | }, 65 | duration: time 66 | }, time); 67 | setTimeout(function () { 68 | $('#yinghua:first-child').remove(); 69 | }, time-5000); 70 | }, par.interval); 71 | } 72 | }) 73 | } 74 | }); 75 | 76 | 77 | --------------------------------------------------------------------------------