“玉渊潭公园樱花节”是每年樱花绽放时，都会在玉渊潭公园樱举办樱花节，游客前往玉渊潭公园，可以欣赏到20个品种2000株樱花。2016玉渊潭樱花节时间:3月中旬-4月中旬观赏最佳,2016年3月23日开幕(具体开幕时间不详- -)6:00─20:30(21:30静园)。樱花的花期极短，从开花到凋谢只不过七日之期，而整棵樱树从开花到全谢也只有两个礼拜左右。
在北京好几年了，一直没有去看过樱花，主要是对那玩样不感冒。这次在好友的再三邀请下，终于来到了玉渊潭公园赏樱花，故事就这样开始了...
v1.0故事发展
女：来给我拍照给我拍照
男：已经拍了很多了
女：来，给我看看拍的怎么样
女：这张不错，樱花飘落的这种感觉好好哦，可惜樱花在照片上不动，不然会更美。
男：你用美图秀秀不就行了嘛。
女：美图秀秀？咦，对了，你不是做网站开发的吗，你帮我把这图片用网站做成花一直在那飘的效果呗？
... 男陷入了沉默，似乎明白了刚才不该提那个建议
对，故事中的男就是我，我就是我 是颜色不一样的烟火。哈哈~~~
作为一名"资深"工程师(ps:其实就一屌丝)，生活中像这种狗血剧情还有很多，好像在外人看来，因为你是程序员，so,跟电脑相关的你就得全会。
因为是程序员，发生类似的狗血剧情(皆为亲身经历)
- 修电脑 or 装系统(相信这个应该每个程序员都经历过，不然就只能说明你的圈子里有硬件高手，不用你来做这些事情)
- 代买火车票/飞机票/订酒店(你在网上帮我订下票吧，你们对这个比较熟)
- 弄QQ空间(表哥，你是做网站开发的吗？那你帮我弄一下QQ空间咯。)
- ...
以上剧情如果有中枪的，请自觉右下举爪点赞，或者分享更多狗血剧情的，请跳到最下面评论！
v2.0正文开始
好了，赶紧开始正文吧，不然分割线都不够用了，再割就割没了。
这里是技术博客，咱只聊技术。既然答应了别人，就得开干。
v3.0技术剖析
position，那么多花瓣就需要用到js克隆clone()，花瓣是动态的就需要用到定时器setInterval。v4.0代码开始
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部分比较简单，没什么特别需要说明的地方。非要说两句的话，那就... 且行且珍惜吧~ 
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: "❄",
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) {是以一个分号开始？ 其实这个分号是用来充当自调用匿名函数的第一对括号与其他代码定义的函数(一个项目中可能会引入很多插件)相连，避免其他人的代码中没有分号结尾而导致报错。
比如：
像上面这段代码就是典型的自调用匿名函数和其他插件代码没有分号分隔的，大家有兴趣可以试一试这段代码运行起来会不会报错？
ps: 这部分内容也是在刘哇勇的博客中学习到的。
2.关于$.extend();在代码注释部分已经详细说明了，在自己写扩展插件的时候，extend()出场率还是很高的。
3.利用sizeFlake = options.minSize + Math.random() * options.maxSize随机设置每个克隆出来的花瓣的大小
4.也没什么过多的讲解的了，关于参数如何使用代码中注释部分也说的很清楚了。
效果演示
为了保护个人隐私，演示效果图里已经将背景图片换成了黑色背景色，想用图片的可以自己在这改。
<body style="background-color:black;">
v博客总结
故事的由来和代码部分(其中代码实现有一些曾经在github看到一个开源插件上学习的，具体是哪个插件也记不得了)都介绍的差不多了，希望能借助这篇博客让大家对jquery插件有一个新的认识。
这里需要特别说明一下。其实写这篇博客真正的动机呢就是告诉大家玉渊潭樱花节已经开始了，再不去看就没的看了。
Are you ready? Let's go.
作 者：请叫我头头哥
出 处：http://www.cnblogs.com/toutou/
关于作者：专注于基础平台的项目开发。如有问题或建议，请多多赐教！
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！
玉渊潭赏樱花有感：从无到有写一个jQuery开源插件的更多相关文章
-
如何写一个Js上传图片插件。
项目里面需要一个上传图片的插件,找了半天没有找到满意的,算了 不找了,自己写一个吧,顺便复习一下js方面的知识.完成之后效果还不错,当然还要继续优化,源码在最后. 介绍一种常见的js插件的写法 ; ( ...
-
如何写一个jquery插件
本文总结整理一下如何写一个jquery插件?虽然现今各种mvvm框架异常火爆,但是jquery这个陪伴我们成长,给我们带来很多帮助的优秀的库不应该被我们抛弃,写此文章,作为对以往欠下的笔记的补充, ...
-
给Ionic写一个cordova(PhoneGap)插件
给Ionic写一个cordova(PhoneGap)插件 之前由javaWeb转html5开发,由于面临新技术,遂在适应的过程中极为挣扎,不过还好~,这个过程也极为短暂:现如今面临一些较为复杂的需求还 ...
-
用javascript写一个emoji表情插件
概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...
-
Skywalking-02：如何写一个Skywalking trace插件
如何写一个Skywalking trace插件 javaagent 原理 美团技术团队-Java 动态调试技术原理及实践 类图 实现 ConsumeMessageConcurrentlyInstrum ...
-
自己写一个 jQuery 插件
我知道这一天终将会到来,现在,它来了. 需求 开发 SharePoint 的 CSOM 应用时,经常需要在网页上输出一些信息. 这种需求和 alert 的弹窗.F12 的断点查看信息的场景是不一样的: ...
-
如何使用jQuery写一个jQuery插件
jQuery插件其实是前端框架的思维,构成一个框架,个人认为必须满足以下几个基础条件:1. 可重用,2. 兼容性,3. 维护方便,虽说现在有很多比较成熟的前端框架,但是也有部分存在配置麻烦,学习成本大 ...
-
自己diy一个jquery分页插件
js基础学习过程中,期间经历换工作的各种面试,很多面试官问过:有没有写过jquery插件?等类似问题. 就个人而言,关于jquery插件的文章确实看过不少,但是一直没有动手写一个,一是不想在目前学习j ...
-
写一个Vue loading 插件
什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...
随机推荐
-
Bean熟悉替换，只替换部分属性，其他属性值不改变
Bean熟悉替换,只替换部分属性,其他属性值不改变 需要加入:asm.jar cglib-2.1.jar,用来map和bean之间的转换(比spring和反射的效率好,因为加入了缓存) packag ...
-
https抓包判断证书问题
openssl s_client -connect 61.135.250.130:443这个是reg.163.com的 tcpdump 也可
-
HBase表删除问题
HBase shell下用list命令查看表,出现错误:找不到表 格式化zookeeper,删除.opt/zookeeper下除了myid的文件 重启集群 再进入HBase shell,list可以查 ...
-
HashMap工作原理 和 HashTable
原文链接: Javarevisited 翻译: ImportNew.com - 唐小娟 译文链接: http://www.importnew.com/7099.html 你用过HashMap吗 譬如H ...
-
在go中使用linked channels进行数据广播
在go中使用linked channels进行数据广播 原文在这里(需FQ),为啥想要翻译这篇文章是因为在实际中也碰到过如此的问题,而该文章的解决方式很巧妙,希望对大家有用. 在go中channels ...
-
PHP----------php-fpm进程数的一些相关配置
1.其中pm.max_children如何配置:pm.max_children 数量的多少根据机器内存确定,基本上一个进程需要30M的内存,假设起100个进程,那么就是3000M,3G内存. 2.pm ...
-
CM (Cloudera Manager) 的安装，便于CDH的离线部署
一.准备工作 主机个数:n台 操作系统:CentOS 6.5 安装所需软件包: CM: cloudera-manager-el6-cm5.4.3_x86_64.tar.gz CDH parcel: C ...
-
java如何写入txt文件
public class TxtWrite { public static void main(String args[]){ contentToTxt("D:\\xyky.txt" ...
-
apache DBUtils 使用例子demo
转自:http://blog.csdn.net/earbao/article/details/44901061 apache DBUtils是java编程中的数据库操作实用工具,小巧简单实用, 1.对 ...
-
[LuoguP2403][SDOI2010]所驼门王的宝藏
题目描述 在宽广的非洲荒漠中,生活着一群勤劳勇敢的羊驼家族.被族人恭称为"先知"的Alpaca L. Sotomon是这个家族的领袖,外人也称其为"所驼门王". ...