jQuery實作web頁面櫻花墜落特效範例程式碼

本文主要介紹了jQuery實現web頁面櫻花墜落的特效,效果非常棒，需要的朋友可以參考下，希望難呢過幫助到大家。

開發原因

• 上課看到一位女生桌面背景是一課櫻花樹，頓時產生了一個讓櫻花可以在web頁面飛舞的想法，藉此把這個插件獻送給那位女同學；

• 開發過焦點圖，輪轉圖，瀑布流等應用插件，但是這類型插件還是第一次做，那個啥興趣使然對吧；

開發工具

• #Jquery+webstorm,無需額外配置任何環境，行動裝置無法使用

#效果示範

為了更加顯眼，背景換成了黑色,gif圖有些卡頓，實際效果比較流暢

#效果詳見Github

使用方法

• 在需要加入效果的頁面加入html程式碼,位置最好放在body元素下第一個標籤

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

• #匯入一下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]型別隨機數

相關推薦：

JavaScript實現個性導航列特效

用H5製作煙火粒子特效的製作方法

css水波按鈕特效

以上是jQuery實作web頁面櫻花墜落特效範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！