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頁面飛舞的想法，借此把這個插件獻(xiàn)送給那位女同學(xué)；
- 開發(fā)過焦點圖，輪轉(zhuǎn)圖，瀑布流等應(yīng)用插件，但是這類型插件還是第一次做，那個啥興趣使然對吧；
開發(fā)工具
- Jquery+webstorm,無需額外配置任何環(huán)境，移動端無法使用
效果演示
為了更加顯眼，背景換成了黑色,gif圖有些卡頓，實際效果比較流暢
效果詳見Github
使用方法
- 在需要加入效果的頁面加入html代碼,位置最好放在body元素下第一個標(biāo)簽
<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(),擴(kuò)展插件定義默認(rèn)參數(shù)
- randomNum（）設(shè)置[m,n]類型隨機(jī)數(shù)
以上所述是小編給大家介紹的jQuery實現(xiàn)web頁面櫻花墜落的特效，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了jQuery前端開發(fā)35個小技巧的相關(guān)資料，非常實用,需要的朋友可以參考下2016-05-05
jquery實現(xiàn)點擊TreeView文本父節(jié)點展開/折疊子節(jié)點
今天客戶提出要點擊菜單（TreeView實現(xiàn)的）的父級節(jié)點時，展開節(jié)點,很多新手朋友可能對此會很陌生，接下來介紹解決方法，感興趣的朋友可以了解下2013-01-01
這篇文章主要介紹了JQuery中Text方法用法,實例分析了Text方法設(shè)置文本內(nèi)容的使用方法,非常簡單實用,需要的朋友可以參考下2015-05-05
Jquery 插件學(xué)習(xí)實例1 插件制作說明與tableUI優(yōu)化
Jquery 插件學(xué)習(xí)實例1 插件制作說明與tableUI優(yōu)化，需要的朋友可以參考下。2010-04-04
jQuery實現(xiàn)動態(tài)添加tr到table的方法
這篇文章主要介紹了jQuery實現(xiàn)動態(tài)添加tr到table的方法,涉及jQuery針對table表格元素的動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12
分析了一下JQuery中的extend方法實現(xiàn)原理
這篇文章主要介紹了通過jQuery.extend的源碼分析了一下JQuery中的extend方法實現(xiàn)原理以及使用方式，非常的詳細(xì)，這里推薦給大家，有需要的小伙伴來參考下吧。2015-02-02
基于jQuery的投票系統(tǒng)顯示結(jié)果插件
投票系統(tǒng)是網(wǎng)站中十分常見的系統(tǒng)，顯示結(jié)果也是十分常見的。最近因為項目需要開發(fā)了一個投票結(jié)果顯示jQuery插件。2011-08-08
jQuery實現(xiàn)動態(tài)添加和刪除一個div
我想做一個可以動態(tài)添加刪除div的功能。中間遇到一個問題，最后在網(wǎng)友的熱心幫助下解決了，使用到的jquery方法和思想就是：事件的綁定和銷毀(unbind)2015-08-08
本文是一些jquery進(jìn)行封裝實現(xiàn)的常用的操作，對平常學(xué)習(xí)工作很實用，有需要的朋友可以參考下。2016-07-07
要實現(xiàn)這樣的一個功能復(fù)選框勾選時給input表單賦值，復(fù)選框取消時將表單值清除，需要的朋友可以參考下2014-05-05