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