随机字符变换效果的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;i<str.length;i++){ var ch = str[i]; if(ch == " "){ types[i] = "space"; continue; } else if(/[a-z]/.test(ch)){ types[i] = "lowerLetter"; } else if(/[A-Z]/.test(ch)){ types[i] = "upperLetter"; } else { types[i] = "symbol"; } letters.push(i); } el.html(""); // Self executing named function expression: (function shuffle(start){ // This code is run options.fps times per second // and updates the contents of the page element var i, len = letters.length, strCopy = str.slice(0); // Fresh copy of the string if(start>len){ 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插件开发教程】相关文章
3. bookblock:可帮助你生成翻页效果的jQuery插件
4. bookblock:可帮助你生成翻页效果的jQuery插件
5. jQuery插件开发入门
本文来源:https://www.51html5.com/a1116.html
上一篇:jQuery中的编程范式(下)
下一篇:jQuery 中的编程范式(中)
﹝随机字符变换效果的jQuery插件开发教程﹞相关内容
- 轻松实现元素固定效果的 jQuery 插件
- 7款很酷的JQuery动画和实用的JQuery应用
- jQuery+CSS三维变换过渡功能插件RefineSlide
- 用纯CSS3实现图片幻灯片切换效果
- phonegap教程第8讲 Jquery Mobile中流式布局,网格布局以及响应式布局教程 ...
- 一款帮助你生成非常有趣的扇形扑克牌风格特效的jQuery插件-Baraja ...
- 帮助你检测客户端浏览器和分辨率的jQuery插件 - Conditionizr
- 帮助更语义化的显示时间的jQuery插件
- 帮助快速生成页面固定显示元素的jQuery插件
- 帮助更语义化的显示时间的jQuery插件