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

時間 2019-11-06

標籤 jquery 實現花瓣隨機飄落收藏欄目 JQuery 简体版

原文原文鏈接

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

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

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

而後艾倫的原文呢在這裏。http://www.imooc.com/learn/453javascript

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

飄花效果的實現

飄花的效果稍微複雜一點，有必定量的JavaScript代碼，經過JS+CSS3的組合實現的。觀察右邊效果，能夠大體分解飄花的實現css

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

這裏採用的JS+CSS3的結合實現，CSS3實現旋轉部分，首先從佈局上來講，飄花是要比全部內部元素層級都要高，因此佈局上是要與頁面li平級才能夠html

實現原理：java

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

執行的流程：css3

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

而後精簡一下代碼，由於我只要飄花效果

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

獲取外面#content的寬高git

而後#snowflake裏面作效果程序員

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

而後麼css麼就是這樣了，top：42px是由於個人導航高度github

#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特技web

<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>