随机字符变换效果的jQuery插件开发教程.doc

随机字符变换效果的jQuery插件开发教程 在这篇快速的jQuery插件开发教程中，我们将创建一个jQuery插件用来随机排序显示任何一个DOM元素的文字内容 -这将会是一个非常有趣的效果，可以用在标题，logo及其幻灯效果中。 ? 在线演示?????? 在线下载 ? 代码片段 那么第一部呢，我们将开发jQuery插件的基本架构。我们将把代码放入一个自运行的方法中，并且扩展$.fn. assets/js/jquery.shuffleLetters.js (function($){ ?? ?$.fn.shuffleLetters = function(prop){ ?? ??? ?// Handling default arguments ?? ??? ?var options = $.extend({ ?? ??? ??? ?// Default arguments ?? ??? ?},prop) ?? ??? ?return this.each(function(){ ?? ??? ??? ?// The main plugin code goes here ?? ??? ?}); ?? ?}; ?? ?// A helper function ?? ?function randomChar(type){ ?? ??? ?// Generate and return a random character ?? ?} })(jQuery); 下一步我们将关注与randomChar()方法。它将会接受一个类型参数（Lowerletter, upperletter或者symbol），并且返回一个随机字符。 function randomChar(type){ ?? ?var pool = ; ?? ?if (type == lowerLetter){ ?? ??? ?pool = abcdefghijklmnopqrstuvwxyz0123456789; ?? ?} ?? ?else if (type == upperLetter){ ?? ??? ?pool = ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789; ?? ?} ?? ?else if (type == symbol){ ?? ??? ?pool = ,.?/\\(^)![]{}*^%$#\; ?? ?} ?? ?var arr = pool.split(); ?? ?return arr[Math.floor(Math.random()*arr.length)]; } 我们本应该使用一个简单的字符池来保存所有的字符，但是这样会有更好效果。 现在我们来书写插件的body部分： $.fn.shuffleLetters = function(prop){ ?? ?var options = $.extend({ ?? ??? ?step?? ?: 8,?? ?// How many times should the letters be changed ?? ??? ?fps?? ?: 25,?? ?// Frames Per Second ?? ??? ?text?? ?: ?? ?// Use this text instead of the contents ?? ?},prop) ?? ?return this.each(function(){ ?? ??? ?var el = $(this), ?? ??? ??? ?str = ; ?? ??? ?if(options.text) { ?? ??? ??? ?str = options.text.split(); ?? ??? ?} ?? ??? ?else { ?? ??? ??? ?str = el.text().split(); ?? ??? ?} ?? ??? ?// The types array holds the type for each character; ?? ??? ?// Letters holds the positions of non-space characters; ?? ??? ?var types = [], ?? ??? ??? ?letters = []; ?? ??? ?// Looping through all the chars of the string ?? ??? ?for(var i=0;istr.length;i++){ ?? ??? ??? ?var ch = str[i]; ?? ??? ??? ?if(ch == ){ ?? ??? ??? ??? ?types[i] = space; ?? ??? ?