写一个Jquery字体插件

在制作项目的过程中,为了给登录用户提醒功能,需要将当前的提示信息字体颜色变换几次,以达到引起用户注意的目的.具体做法就是当鼠标移动过提醒信息的时候,当前的字体颜色能够每隔50ms变换一次.

非Plugin版本的制作方法

初次接触到这个需求的时候,很多人都想到利用setTimeout来做,我也不例外,代码如下:

由于在代码中注释的已经很详细了,这里我就不再多加解释了,核心思想就是利用setTimeOut方法递归调用函数体本身,以达到循环变换的效果.

然后问题出来了,当网站很多地方需要这种效果的时候,单纯的粘贴赋值显得过于笨重了,所以这里准备依据上面的代码逻辑,来实现一个jquery字体插件.

Plugin版本的制作方法

开始之前,需要说明的是,当新写一个jquery插件的时候,一般都是以$.fn.myPluginFunctionName来定义调用的函数的名称,这里我们也不例外:

之后的使用方法就很简单了 ,直接把之前的代码搬过来即可.具体方法如下:

首先,我们先把之前的changeFontColor核心函数搬过来:

然后,在主函数体中绑定刚才写的changeFontColor函数:

这样一个很简单的JQuery plugin就编写好了. 将其保存为fontdaemon.js,然后在页面中引用,直接利用如下的代码,即可成功调用:

下面是具体的使用结果展示:

当然,如果能够将当前的元素返回,那么我们是可以继续改变其属性的,也就是说,虽然我们调用$(".test").fontdaemon();,但是我们依然可以改变.test类的属性: $(".test").fontdaemon().css("background","green");

这个改如何实现呢?其实很简单,只需要将当前元素return即可:

最后显示的结果如下:

更新一下

刚才看到了评论,说是是否能够弄成颜色自定义的,我修改了部分代码,目前可以实现代码自定义了:

然后你可以按照下面的三种方式来使用:

源码下载

参考资料