zoukankan      html  css  js  c++  java

  • 玉渊潭赏樱花有感：从无到有写一个jQuery开源插件

    “玉渊潭公园樱花节”是每年樱花绽放时，都会在玉渊潭公园樱举办樱花节，游客前往玉渊潭公园，可以欣赏到20个品种2000株樱花。2016玉渊潭樱花节时间:3月中旬-4月中旬观赏最佳,2016年3月23日开幕(具体开幕时间不详- -)6:00─20:30(21:30静园)。樱花的花期极短，从开花到凋谢只不过七日之期，而整棵樱树从开花到全谢也只有两个礼拜左右。

    在北京好几年了，一直没有去看过樱花，主要是对那玩样不感冒。这次在好友的再三邀请下，终于来到了玉渊潭公园赏樱花，故事就这样开始了...

    请叫我头头哥 web前端特效
    华丽的分割线

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

    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插件有一个新的认识。
    这里需要特别说明一下。其实写这篇博客真正的动机呢就是告诉大家玉渊潭樱花节已经开始了，再不去看就没的看了。请叫我头头哥 web前端特效
    Are you ready? Let's go.


    作　　者：请叫我头头哥
    出　　处：http://www.cnblogs.com/toutou/
    关于作者：专注于基础平台的项目开发。如有问题或建议，请多多赐教！
    版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
    特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我
    声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！

  • 相关阅读:
    JS深度判断两个数组对象字段相同
    box-shadow inset
    swiper实现滑动到某页锁住不让滑动
    vuex上手文章参考
    js基础补漏
    react学习文章
    C# .Net String字符串效率提高-字符串拼接
    JS,Jquery获取各种屏幕的宽度和高度
    highcharts的dataLabels如何去处阴影
    .net C# 抽奖,中奖
  • 原文地址：https://www.cnblogs.com/toutou/p/jqueryos.html
Copyright © 2011-2022 走看看