从无到有写一个jQuery开源插件

最新推荐文章于 2024-08-09 08:03:57 发布

threenerd

最新推荐文章于 2024-08-09 08:03:57 发布

阅读量1.8k

点赞数

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