来源:tutorialzine.com 编译:GBin1.com
在这篇快速的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插件开发教程
分享到:
相关推荐
jQuery Chaffle插件为网页开发提供了一种简单、高效的生成和打乱随机字符的解决方案。它的易用性和灵活性,使其成为创建动态、有趣的交互式网页元素的理想工具。通过深入理解和运用Chaffle,开发者可以为自己的项目...
"jQuery网页刷新随机显示一组字符串打字显示/渐渐消失效果"就是一个这样的例子,它利用jQuery库来实现文字的动态显示和消失,给用户带来新颖的视觉感受。下面我们将深入探讨这个效果的实现原理和相关知识点。 首先...
Jquery中用于省略字符过长的插件。在网页中经常会遇到字符溢出,然后使用省略“...”字符来代替溢出的文本。
**jQuery Validation Engine 插件详解** 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,...在实际开发中,结合使用其他jQuery插件和前端框架,能更好地构建出高效、友好的Web应用。
本项目名为"jquery鼠标悬停随机显示字符特效.zip",其核心是利用jQuery实现了一个名为Chaffle的随机字符插件,专门用于文字特效。 Chaffle插件的工作原理是当鼠标悬停在特定元素上时,会随机显示一串预设的字符。这...
这就是“jQuery字符插件之适合留言板的jquery文本框输入字符限制插件”的作用。这个插件专门用于帮助开发者实现在jQuery环境中对文本输入框的字符数量进行实时监控和限制。 jQuery是一个强大的JavaScript库,它简化...
4. **兼容性**:由于是基于jQuery开发,所以该插件应具有良好的浏览器兼容性,能够在大部分现代浏览器上正常工作,包括桌面和移动端。 5. **易于集成**:作为一款jQuery插件,它应该提供简单的API接口和配置选项,...
一个jQuery辅助的字符类型输入限制插件,这个插件是先限制再输入,也就是当用户输入的时候,输入了不允许的字符,则不自动过滤掉该字符,不会显示在文本框中。这款插件的名字叫做jQuery AlphaNumeric,by Paulo P. ...
总的来说,这个“jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.zip”为开发人员提供了一套完整的解决方案,帮助他们快速构建吸引用户的互动抽奖功能。通过熟练运用HTML5、jQuery和JavaScript,开发者可以...
至于“给力技术.url”,这通常是一个快捷方式文件,指向一个关于jQuery Textarea插件的在线资源,如开发者的博客、教程或者示例页面。通过打开这个URL,我们可以获取更多的使用指南、示例代码以及可能的更新信息。 ...
这个效果包括了字符逐个出现、回退删除以及可能的停顿和错误修正,使得动态显示的文字更具有真实感,可以用于创建引人入胜的故事叙述、教程或产品演示等场景。 标签“JavaScript开发-其它杂项”暗示这个插件是...
5. **过渡动画**:为了使变换过程平滑,Flapper可能使用CSS3的过渡效果或者jQuery自身的动画方法,让字符的切换带有过渡效果。 6. **结束条件**:当所有字符经过一定的次数变换后,特效会停止并展示预设的文字,这...
总的来说,jQuery插件"floattextbox"修改版是一个优化了用户体验的输入组件,它结合了浮层效果和字符计数提示,使得在网页上进行文本输入变得更加便捷和直观。开发者可以通过研究其源码,学习如何使用jQuery和...
总之,"Jquery网页排版插件"是前端开发中的一个重要工具,它利用jQuery库简化和优化了网页的布局和文本格式化。配合Java后端和MyEclipse这样的开发环境,可以构建出高效、互动性强的Web应用。具体到“davatron5000-...
jQuery Form插件由Malsup开发,是一款非常实用的jQuery扩展,能够极大地简化表单的Ajax提交过程。它不仅提供了一套完整的API来管理表单数据,还支持复杂的表单验证与文件上传等功能。 ##### 2.1 主要特性 - **Ajax...
jQuery插件是jQuery生态系统的重要组成部分,它们扩展了jQuery的基本功能,提供了丰富的交互效果和实用工具,使得网页开发更加高效和便捷。 ### 一、jQuery插件的结构 一个基本的jQuery插件通常由以下几部分组成:...
总的来说,通过使用jQuery插件模拟支付宝密码输入框效果,我们可以提升网站的安全感和用户体验,同时也能在一定程度上遵循Web无障碍标准,为所有用户提供一致的交互体验。这个过程涉及到JavaScript编程、CSS样式设计...
在实际应用中,开发人员需要根据自身需求调整插件的配置,比如设置不同的强度阈值,或者自定义提示信息和样式。此外,考虑到现代Web的安全标准,插件还可能包含防止密码在页面源码中明文显示的机制。 总的来说,...
在IT行业中,jQuery是一款非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。...在开发过程中,不断优化和完善插件,使之更加符合用户需求,是提升产品品质的关键。