源碼地址

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頁面櫻花墜落的特效，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！