這個(gè)東西實(shí)際上慕課的艾倫大大先寫的。

然后別人推薦給我，偶一直收藏著，然后偶再推薦給偶的隊(duì)友們，然后呢，這幫貨就懶得都不肯去看。。。

接著今天受傷在家就提出來了一點(diǎn)東西放在我博客頂上。。。

然后艾倫的原文呢在這里。http://www.imooc.com/learn/453

?

?

在開始前，按照慣例吐槽一下最近的狀況吧！昨天我騎車完成第4起車禍。然后打字只能靠6根指頭，還有腦袋也被來了一下。。。然后目測除了外傷，頭疼之外無大礙！吐槽點(diǎn)在與，程序員騎車的時(shí)候想的還是代碼。然后peng。最后既然入了這行了，還是別玩車了。。。T_T

?

飄花效果的實(shí)現(xiàn)

飄花的效果稍微復(fù)雜一點(diǎn)，有一定量的JavaScript代碼，通過JS+CSS3的組合實(shí)現(xiàn)的。觀察右邊效果，可以大致分解飄花的實(shí)現(xiàn)

• 飄花比人物的層級(jí)都高
• 飄花數(shù)量非常多
• 飄花會(huì)有一定的軌跡運(yùn)動(dòng)
• 飄花帶有漸變的效果
• 飄花帶有旋轉(zhuǎn)的效果
• 飄花落到地面會(huì)消失

這里采用的JS+CSS3的結(jié)合實(shí)現(xiàn)，CSS3實(shí)現(xiàn)旋轉(zhuǎn)部分，首先從布局上來說，飄花是要比所有內(nèi)部元素層級(jí)都要高，所以布局上是要與頁面li平級(jí)才可以

實(shí)現(xiàn)原理：

通過定時(shí)器調(diào)用JS代碼不斷的動(dòng)態(tài)創(chuàng)建雪花節(jié)點(diǎn)，隨機(jī)選擇一個(gè)圖片作為其背景，賦予三個(gè)初始的樣式屬性top,left與opacity，通過transition動(dòng)畫過度的方式執(zhí)行這3個(gè)屬性的動(dòng)畫變化。整個(gè)原理其實(shí)也是很簡單的，主要涉及了一些細(xì)節(jié)的問題：例如元素的創(chuàng)建、圖片的隨機(jī)、開始的left與opacity的隨機(jī)處理、最終值的計(jì)算等等

執(zhí)行的流程：

• getImagesName隨機(jī)6張圖片，snowflakeURl定義一個(gè)地址的范圍
• createSnowBox創(chuàng)建雪花元素的節(jié)點(diǎn)，并且增加一個(gè)snowRoll的樣式，也就是旋轉(zhuǎn)的關(guān)鍵幀實(shí)現(xiàn)
• 定時(shí)器設(shè)置200ms不斷的生成雪花對象，計(jì)算出3個(gè)屬性的初始值，通過createSnowBox創(chuàng)建雪花元素，并且附上初始值，然后執(zhí)行transition附上最終值，執(zhí)行動(dòng)畫
• 動(dòng)畫結(jié)束后執(zhí)行$(this).remove() ?刪除這個(gè)對象

?

然后精簡一下代碼，因?yàn)槲抑灰h花效果

?

<div id='content'><!-- 飄花 --><div id="snowflake"></div></div>

?

獲取外面#content的寬高

然后#snowflake里面做效果

#content { width: 100%; height: 100%; top: 42px; overflow: hidden; position: absolute; }

然后么css么就是這樣了，top：42px是因?yàn)槲业膶?dǎo)航高度

#snowflake { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } .snowRoll { position: absolute; opacity: 0; -webkit-animation-name: mysnow; -webkit-animation-duration: 20s; -moz-animation-name: mysnow; -moz-animation-duration: 20s; height: 80px; }@-webkit-keyframes mysnow { 0% {bottom: 100%; }50% {-webkit-transform: rotate(1080deg); }100% {-webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px); } }@-moz-keyframes mysnow { 0% {bottom: 100%; }50% {-moz-transform: rotate(1080deg); }100% {-moz-transform: rotate(0deg) translate3d(50px, 50px, 50px); } }

這里是給飄花加旋轉(zhuǎn)之類的css3特技

?

<script type="text/javascript"> $(function() {var snowflakeURl = ['http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_1.png','http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_2.png','http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_3.png','http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_4.png','http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_5.png','http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_6.png'] //js設(shè)置數(shù)組存儲(chǔ)6張花瓣的圖片
　　var container = $("#content");visualWidth = container.width();visualHeight = container.height();
　　//獲取content的寬高

　　/////飄雪花 /////function snowflake() {// 雪花容器var $flakeContainer = $('#snowflake');// 隨機(jī)六張圖function getImagesName() {return snowflakeURl[[Math.floor(Math.random() * 6)]];}// 創(chuàng)建一個(gè)雪花元素function createSnowBox() {var url = getImagesName();return $('<div class="snowbox" />').css({'width': 41,'height': 41,'position': 'absolute','backgroundSize': 'cover','zIndex': 100000,'top': '-41px','backgroundImage': 'url(' + url + ')'}).addClass('snowRoll');}// 開始飄花setInterval(function() {// 運(yùn)動(dòng)的軌跡var startPositionLeft = Math.random() * visualWidth - 100,startOpacity = 1,endPositionTop = visualHeight - 40,endPositionLeft = startPositionLeft - 100 + Math.random() * 500,duration = visualHeight * 10 + Math.random() * 5000;// 隨機(jī)透明度，不小于0.5var randomStart = Math.random();randomStart = randomStart < 0.5 ? startOpacity : randomStart;// 創(chuàng)建一個(gè)雪花var $flake = createSnowBox();// 設(shè)計(jì)起點(diǎn)位置 $flake.css({left: startPositionLeft,opacity : randomStart});// 加入到容器 $flakeContainer.append($flake);// 開始執(zhí)行動(dòng)畫 $flake.transition({top: endPositionTop,left: endPositionLeft,opacity: 0.7}, duration, 'ease-out', function() {$(this).remove() //結(jié)束后刪除 });}, 200);}snowflake()
　　　//執(zhí)行函數(shù)}) </script>

?

好了代碼擼完了...最后分享個(gè)艾倫的博客

擼完代碼了......然后單身狗沒地方約......那就來個(gè)段子把

最近有個(gè)游戲+電視劇叫花千骨的東西。。。作為個(gè)動(dòng)漫宅每天愛奇藝的廣告都是這個(gè)鬼。。然后有一廣告“花千骨的血可以使花草枯萎”

這個(gè)時(shí)候有神人表示，那么，經(jīng)過那一夜，那位兄臺(tái)現(xiàn)在是否安好，零部件是否有遺漏。。。

?

?

然后最后把需要用到的庫發(fā)一下

?

一個(gè)jquery，，，這個(gè)看標(biāo)題么就知道了

jQuery Transit還有這個(gè)東西

?http://github.com/rstacruz/jquery.transit

jquery對一些效果的擴(kuò)展

?

轉(zhuǎn)載于:https://www.cnblogs.com/LoveOrHate/p/4731101.html

總結(jié)

以上是生活随笔為你收集整理的Jquery实现花瓣随机飘落（收藏自慕课网）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。