jQuery實現(xiàn)web頁面櫻花墜落的特效
更新時間：2017年06月01日 14:06:29 作者：惠惠_
這篇文章主要介紹了jQuery實現(xiàn)web頁面櫻花墜落的特效,效果非常棒，需要的朋友可以參考下
源碼地址
https://github.com/jingegebuguai/Cherry_Blossoms（求star）
開發(fā)原因
- 上課看到一位女生桌面背景是一課櫻花樹，頓時產(chǎn)生了一個讓櫻花可以在web頁面飛舞的想法，借此把這個插件獻送給那位女同學(xué)；
- 開發(fā)過焦點圖，輪轉(zhuǎn)圖，瀑布流等應(yīng)用插件，但是這類型插件還是第一次做，那個啥興趣使然對吧；
開發(fā)工具
- Jquery+webstorm,無需額外配置任何環(huán)境，移動端無法使用
效果演示
為了更加顯眼，背景換成了黑色,gif圖有些卡頓，實際效果比較流暢
效果詳見Github
使用方法
- 在需要加入效果的頁面加入html代碼,位置最好放在body元素下第一個標簽
<div class="cherry"> <img id="yinghua" src="../image/yinghua.png" alt="" > </div>
- 導(dǎo)入一下js代碼其中各變量可根據(jù)需要改變
$(function(){
$('.cherry').Cherry_Blossoms({
is_Cherry:true,//是否生成櫻花
image_min:10,//花瓣最小寬度和高度
image_max:50,//花瓣最大寬度和高度
time_min:10000,//花瓣最快下墜時間
time_max:20000,//花瓣最慢下墜時間
interval:500//花瓣生成時間間隔
})
})
js插件
- IIFE（立即執(zhí)行匿名函數(shù)）
- $.extend(),擴展插件定義默認參數(shù)
- randomNum（）設(shè)置[m,n]類型隨機數(shù)
以上所述是小編給大家介紹的jQuery實現(xiàn)web頁面櫻花墜落的特效，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)的表格展開伸縮效果,結(jié)合完整實例形式分析了jQuery響應(yīng)鼠標事件動態(tài)修改頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-09-09
本文給大家分享的是一段使用jQuery實現(xiàn)的多按鈕單擊之后變色的代碼，非常的簡單實用，有需要的小伙伴可以參考下。2014-11-11
這篇文章主要介紹了jQuery動畫特效,詳細敘述了jQuery動畫特效的實現(xiàn)方法,非常實用,需要的朋友可以參考下2014-08-08
普通JS寫法與jQuery選擇器寫法,選擇table的行，隔一行，選擇一行，感興趣的朋友可以參考下哈，希望對你有所幫助2013-04-04
jquery+php實現(xiàn)滾動的數(shù)字特效
本文將結(jié)合實例使用jquery背景動畫插件，將數(shù)字作為背景圖片，定時讓背景圖片滾動起來，從而實現(xiàn)了滾動數(shù)字的效果，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了jQuery日程管理插件fullcalendar使用方法，整合農(nóng)歷節(jié)氣和節(jié)日，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要為大家詳細介紹了jquery實現(xiàn)點擊按鈕顯示與隱藏效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
jQuery 陰影插件代碼分享，需要的朋友可以參考下。2012-01-01
jQuery獲得各種控件Value的方法，使用jquery的朋友可以參考下。2010-11-11
jQuery中bind,live,delegate與one方法的用法及區(qū)別解析
本篇文章主要是對jQuery中bind,live,delegate與one方法的用法及區(qū)別進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12