在制作项目的过程中,为了给登录用户提醒功能,需要将当前的提示信息字体颜色变换几次,以达到引起用户注意的目的.具体做法就是当鼠标移动过提醒信息的时候,当前的字体颜色能够每隔50ms变换一次.
非Plugin版本的制作方法
初次接触到这个需求的时候,很多人都想到利用setTimeout来做,我也不例外,代码如下:
由于在代码中注释的已经很详细了,这里我就不再多加解释了,核心思想就是利用setTimeOut方法递归调用函数体本身,以达到循环变换的效果.
然后问题出来了,当网站很多地方需要这种效果的时候,单纯的粘贴赋值显得过于笨重了,所以这里准备依据上面的代码逻辑,来实现一个jquery字体插件.
Plugin版本的制作方法
开始之前,需要说明的是,当新写一个jquery插件的时候,一般都是以$.fn.myPluginFunctionName来定义调用的函数的名称,这里我们也不例外:
之后的使用方法就很简单了 ,直接把之前的代码搬过来即可.具体方法如下:
首先,我们先把之前的changeFontColor核心函数搬过来:
然后,在主函数体中绑定刚才写的changeFontColor函数:
这样一个很简单的JQuery plugin就编写好了. 将其保存为fontdaemon.js,然后在页面中引用,直接利用如下的代码,即可成功调用:
下面是具体的使用结果展示:
当然,如果能够将当前的元素返回,那么我们是可以继续改变其属性的,也就是说,虽然我们调用$(".test").fontdaemon();,但是我们依然可以改变.test类的属性: $(".test").fontdaemon().css("background","green");
这个改如何实现呢?其实很简单,只需要将当前元素return即可:
最后显示的结果如下:
更新一下
刚才看到了评论,说是是否能够弄成颜色自定义的,我修改了部分代码,目前可以实现代码自定义了:
然后你可以按照下面的三种方式来使用:
源码下载
参考资料
from codeproject:http://www.codeproject.com/Articles/291290/How-To-Write-Plugin-in-jQuery
stackoverlow 问答:http://stackoverflow.com/questions/14190121/my-jquery-plugin-throws-exception