在制作項目的過程中,為了給登錄用戶提醒功能,需要將當前的提示信息字體顏色變換幾次,以達到引起用戶注意的目的.具體做法就是當鼠標移動過提醒信息的時候,當前的字體顏色能夠每隔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