Jquery實現花瓣隨機飄落（收藏自慕課網）

這個東西實際上慕課的艾倫大大先寫的。

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

接着今天受傷在家就提出來了一點東西放在我博客頂上。。。

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

 

 

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

 

飄花效果的實現

飄花的效果稍微復雜一點，有一定量的JavaScript代碼，通過JS+CSS3的組合實現的。觀察右邊效果，可以大致分解飄花的實現

• 飄花比人物的層級都高
• 飄花數量非常多
• 飄花會有一定的軌跡運動
• 飄花帶有漸變的效果
• 飄花帶有旋轉的效果
• 飄花落到地面會消失

這里采用的JS+CSS3的結合實現，CSS3實現旋轉部分，首先從布局上來說，飄花是要比所有內部元素層級都要高，所以布局上是要與頁面li平級才可以

實現原理：

通過定時器調用JS代碼不斷的動態創建雪花節點，隨機選擇一個圖片作為其背景，賦予三個初始的樣式屬性top,left與opacity，通過transition動畫過度的方式執行這3個屬性的動畫變化。整個原理其實也是很簡單的，主要涉及了一些細節的問題：例如元素的創建、圖片的隨機、開始的left與opacity的隨機處理、最終值的計算等等

執行的流程：

• getImagesName隨機6張圖片，snowflakeURl定義一個地址的范圍
• createSnowBox創建雪花元素的節點，並且增加一個snowRoll的樣式，也就是旋轉的關鍵幀實現
• 定時器設置200ms不斷的生成雪花對象，計算出3個屬性的初始值，通過createSnowBox創建雪花元素，並且附上初始值，然后執行transition附上最終值，執行動畫
• 動畫結束后執行$(this).remove()  刪除這個對象

 

然后精簡一下代碼，因為我只要飄花效果

 

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

 

獲取外面#content的寬高

然后#snowflake里面做效果

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

然后么css么就是這樣了，top：42px是因為我的導航高度

#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);
}
}

這里是給飄花加旋轉之類的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設置數組存儲6張花瓣的圖片
　　
     var container = $("#content");
       visualWidth = container.width();
       visualHeight = container.height();
　　//獲取content的寬高

　　
    ///////
    //飄雪花 //
    ///////
    function snowflake() {
        // 雪花容器
        var $flakeContainer = $('#snowflake');
　　　　　　
        // 隨機六張圖
        function getImagesName() {
            return snowflakeURl[[Math.floor(Math.random() * 6)]];
        }
        // 創建一個雪花元素
        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() {
            // 運動的軌跡
            var startPositionLeft = Math.random() * visualWidth - 100,
                startOpacity    = 1,
                endPositionTop  = visualHeight - 40,
                endPositionLeft = startPositionLeft - 100 + Math.random() * 500,
                duration        = visualHeight * 10 + Math.random() * 5000;

            // 隨機透明度，不小於0.5
            var randomStart = Math.random();
            randomStart = randomStart < 0.5 ? startOpacity : randomStart;

            // 創建一個雪花
            var $flake = createSnowBox();

            // 設計起點位置
            $flake.css({
                left: startPositionLeft,
                opacity : randomStart
            });

            // 加入到容器
            $flakeContainer.append($flake);

            // 開始執行動畫
            $flake.transition({
                top: endPositionTop,
                left: endPositionLeft,
                opacity: 0.7
            }, duration, 'ease-out', function() {
                $(this).remove() //結束后刪除
            });
            
        }, 200);
    }


   　　
     snowflake()
　　　//執行函數

})
</script>

 

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

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

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

這個時候有神人表示，那么，經過那一夜，那位兄台現在是否安好，零部件是否有遺漏。。。

 

 

然后最后把需要用到的庫發一下

 

一個jquery，，，這個看標題么就知道了

jQuery Transit還有這個東西

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

jquery對一些效果的擴展