玉淵潭賞櫻花有感：從無到有寫一個Jquery開源插件

“玉淵潭公園櫻花節”是每年櫻花綻放時，都會在玉淵潭公園櫻舉辦櫻花節，游客前往玉淵潭公園，可以欣賞到20個品種2000株櫻花。2016玉淵潭櫻花節時間:3月中旬-4月中旬觀賞最佳,2016年3月23日開幕(具體開幕時間不詳- -)6:00─20:30(21:30靜園)。櫻花的花期極短，從開花到凋謝只不 ...

“玉淵潭公園櫻花節”是每年櫻花綻放時，都會在玉淵潭公園櫻舉辦櫻花節，游客前往玉淵潭公園，可以欣賞到20個品種2000株櫻花。2016玉淵潭櫻花節時間:3月中旬-4月中旬觀賞最佳,2016年3月23日開幕(具體開幕時間不詳- -)6:00─20:30(21:30靜園)。櫻花的花期極短，從開花到凋謝只不過七日之期，而整棵櫻樹從開花到全謝也只有兩個禮拜左右。

在北京好幾年了，一直沒有去看過櫻花，主要是對那玩樣不感冒。這次在好友的再三邀請下，終於來到了玉淵潭公園賞櫻花，故事就這樣開始了...

華麗的分割線

v1.0故事發展

女：來給我拍照給我拍照

男：已經拍了很多了

女：來，給我看看拍的怎麼樣

女：這張不錯，櫻花飄落的這種感覺好好哦，可惜櫻花在照片上不動，不然會更美。

男：你用美圖秀秀不就行了嘛。

女：美圖秀秀？咦，對了，你不是做網站開發的嗎，你幫我把這圖片用網站做成花一直在那飄的效果唄？

... 男陷入了沉默，似乎明白了剛纔不該提那個建議

華麗的分割線

對，故事中的男就是我，我就是我是顏色不一樣的煙火。哈哈~~~ 請叫我頭頭哥 web前端特效

作為一名"資深"工程師(ps:其實就一屌絲)，生活中像這種狗血劇情還有很多，好像在外人看來，因為你是程式員，so,跟電腦相關的你就得全會。

因為是程式員，發生類似的狗血劇情(皆為親身經歷)

修電腦 or 裝系統(相信這個應該每個程式員都經歷過，不然就只能說明你的圈子裡有硬體高手，不用你來做這些事情)
代買火車票/飛機票/訂酒店(你在網上幫我訂下票吧，你們對這個比較熟)
弄QQ空間(表哥，你是做網站開發的嗎？那你幫我弄一下QQ空間咯。)
...

以上劇情如果有中槍的，請自覺右下舉爪點贊，或者分享更多狗血劇情的，請跳到最下麵評論！

v2.0正文開始

好了，趕緊開始正文吧，不然分割線都不夠用了，再割就割沒了。

這裡是技術博客，咱只聊技術。既然答應了別人，就得開乾。

v3.0技術剖析

需要櫻花動的效果那就需要用到定位position，那麼多花瓣就需要用到js克隆clone()，花瓣是動態的就需要用到定時器setInterval。

v4.0代碼開始

好像差不多了吧？這麼一個效果其實並不難。如果再剖析下去的話，估計會有人說"作"了。請叫我頭頭哥 web前端特效

html部分

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>花兒朵朵</title>
    <style>
        html, body {
            font-family: Helvetica, Arial, sans-serif;
            font-size: 12px;
            line-height: 16px;
            padding: 0;
            margin: 0;
            color: pink;
        }

        #flake {
            color: #fff;
            position: absolute;
            font-size: 25px;
            top: -50px;
        }
    </style>
    <script src="http://toutouge.github.io/Demo/carousel/jquery-1.10.2.js"></script>
    <script src="jquery.nagareboshi.js"></script>
    <script>
        $(function () {
            $.fn.nagareboshi({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#0099FF', flakeChar: '✿' });
        })
    </script>
</head>
<body style="background-color:black;">

</body>
</html>

html部分比較簡單，沒什麼特別需要說明的地方。非要說兩句的話，那就... 且行且珍惜吧~ 請叫我頭頭哥 web前端特效

JS部分

/**
 * jquery.nagareboshi
 *
 *
 * @version 1 (3/31/2016)
 * @author 頭頭哥
 * @requires jQuery
 *
 * @params flakeChar - 漂浮圖標樣式, 預設是雪花, 其它漂亮符號參考： ❥ღ❣♔♕♖♚♛♜☀☁☂☃☼☽☾♨❄❅❆★☆✦✪✫✿
 * @params minSize - 預設size最小是10
 * @params maxSize - 預設size最大是20
 * @params newOn - 出現新圖標的頻率，預設是500
 * @params flakeColors - 預設的圖標顏色 , 預設是#FFFFFF
 * @params durationMillis - 停止載入圖標的時間，預設是一直載入
 * @example $.fn.nagareboshi({ maxSize: 200, newOn: 1000 });
 */
; (function ($, window, document, undefined) {

    $.fn.nagareboshi = function (options) {

        var $flake = $('<div class="flake" />').css({ 'position': 'absolute', 'top': '-50px' }),
            documentHeight = $(document).height(),
            documentWidth = $(document).width(),
            defaults = {
                flakeChar: "&#10052;",
                minSize: 10,
                maxSize: 20,
                newOn: 500,
                flakeColor: ["#ffffff"],
                durationMillis: null
            },

            // 當給extend方法傳遞一個以上的參數時，它會將所有參數對象合併到第一個裡。同時，如果對象中有同名屬性時，合併的時候後面的會覆蓋前面的。
            // 所以如果傳遞進來的options參數有的值，將會覆蓋defaults對象里對應的值
            options = $.extend({}, defaults, options);

        $flake.html(options.flakeChar);

        var interval = setInterval(function () {
            var startPositionLeft = Math.random() * documentWidth - 100,
                startOpacity = 0.5 + Math.random(),
                sizeFlake = options.minSize + Math.random() * options.maxSize,
                endPositionTop = documentHeight - defaults.maxSize - 40,
                endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
                durationFall = documentHeight * 10 + Math.random() * 5000;
            $flake
                .clone()
                .appendTo('body')
                .css(
                    {
                        left: startPositionLeft,
                        opacity: startOpacity,
                        'font-size': sizeFlake,
                        color: options.flakeColor[Math.floor((Math.random() * options.flakeColor.length))]
                    }
                )
                .animate(
                    {
                        top: endPositionTop,
                        left: endPositionLeft,
                        opacity: 0.2
                    },
                    durationFall,
                    'linear',
                    function () {
                        $(this).remove()
                    }
                );
        }, options.newOn);
        console.log(options.durationMillis);
        if (options.durationMillis) {
            setTimeout(function () {
                clearInterval(interval);
            }, options.durationMillis);
        }
    };

})(jQuery, window, document);

JS部分講解：

1.為什麼代碼開始; (function ($, window, document, undefined) {是以一個分號開始？其實這個分號是用來充當自調用匿名函數的第一對括弧與其他代碼定義的函數(一個項目中可能會引入很多插件)相連，避免其他人的代碼中沒有分號結尾而導致報錯。

比如：
請叫我頭頭哥 web前端特效

像上面這段代碼就是典型的自調用匿名函數和其他插件代碼沒有分號分隔的，大家有興趣可以試一試這段代碼運行起來會不會報錯？
ps: 這部分內容也是在劉哇勇的博客中學習到的。

2.關於$.extend();在代碼註釋部分已經詳細說明瞭，在自己寫擴展插件的時候，extend()出場率還是很高的。

3.利用sizeFlake = options.minSize + Math.random() * options.maxSize隨機設置每個克隆出來的花瓣的大小

4.也沒什麼過多的講解的了，關於參數如何使用代碼中註釋部分也說的很清楚了。

效果演示

請叫我頭頭哥 web前端特效

為了保護個人隱私，演示效果圖裡已經將背景圖片換成了黑色背景色，想用圖片的可以自己在這改。請叫我頭頭哥 web前端特效

<body style="background-color:black;">

v博客總結

故事的由來和代碼部分(其中代碼實現有一些曾經在github看到一個開源插件上學習的，具體是哪個插件也記不得了)都介紹的差不多了，希望能藉助這篇博客讓大家對jquery插件有一個新的認識。
這裡需要特別說明一下。其實寫這篇博客真正的動機呢就是告訴大家玉淵潭櫻花節已經開始了，再不去看就沒的看了。
Are you ready? Let's go.

作　　者：請叫我頭頭哥
出　　處：http://www.cnblogs.com/toutou/
關於作者：專註於微軟平臺的項目開發。如有問題或建議，請多多賜教！
版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。
特此聲明：所有評論和私信都會在第一時間回覆。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我
聲援博主：如果您覺得文章對您有幫助，可以點擊文章右下角【推薦】一下。您的鼓勵是作者堅持原創和持續寫作的最大動力！