您的位置：首页 > Web前端 > JQuery

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

2016-05-03 09:56 537 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航