在线演示 在线下载
代码片段那么第一部呢，我们将开发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;ilen){ return; } // all the work gets done here for(i=math.max(start,0); i < len; i++){ // the start argument and options.step limit // the characters we will be working on at once if( i < start+options.step){ // generate a random character at this position strcopy[letters[i]] = randomchar(types[letters[i]]); } else { strcopy[letters[i]] = ; } } el.text(strcopy.join()); settimeout(function(){ shuffle(start+1); },1000/options.fps); })(-options.step); }); };
这 个插件将可以接受被调用的dom元素的内容，或者当作一个参数传入的对象的text属性。然后它分割字符串到字符，并且决定使用的类型。这个 shuffle功能使用settimeout()来调用自己并且随机生成字符串，更新dom元素。如果你不清楚settimeout()的使用，可以参考 这篇文章：http://www.gbin1.com/technology/jqueryhowto/fadeoutonebyone/ ， 调用setimeout方法可以帮助你按特定时间间隔执行某些操作。
以上就是随机字符变换效果的jquery插件开发教程的内容。