`
jjfat
  • 浏览: 287865 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多

来源:tutorialzine.com         编译:GBin1.com

 

在这篇快速的jQuery插件开发教程中,我们将创建一个jQuery插件用来随机排序显示任何一个DOM元素的文字内容 -这将会是一个非常有趣的效果,可以用在标题,logo及其幻灯效果中。

 

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

 

在线演示       在线下载

 

代码片段

那么第一部呢,我们将开发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

    jQuery Chaffle插件为网页开发提供了一种简单、高效的生成和打乱随机字符的解决方案。它的易用性和灵活性,使其成为创建动态、有趣的交互式网页元素的理想工具。通过深入理解和运用Chaffle,开发者可以为自己的项目...

    jQuery网页刷新随机显示一组字符串打字显示/渐渐消失效果

    "jQuery网页刷新随机显示一组字符串打字显示/渐渐消失效果"就是一个这样的例子,它利用jQuery库来实现文字的动态显示和消失,给用户带来新颖的视觉感受。下面我们将深入探讨这个效果的实现原理和相关知识点。 首先...

    Jquery中用于省略字符过长的插件

    Jquery中用于省略字符过长的插件。在网页中经常会遇到字符溢出,然后使用省略“...”字符来代替溢出的文本。

    表单验证jquery插件

    **jQuery Validation Engine 插件详解** 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,...在实际开发中,结合使用其他jQuery插件和前端框架,能更好地构建出高效、友好的Web应用。

    jquery鼠标悬停随机显示字符特效.zip

    本项目名为"jquery鼠标悬停随机显示字符特效.zip",其核心是利用jQuery实现了一个名为Chaffle的随机字符插件,专门用于文字特效。 Chaffle插件的工作原理是当鼠标悬停在特定元素上时,会随机显示一串预设的字符。这...

    jQuery字符插件之适合留言板的jquery文本框输入字符限制插件下载

    这就是“jQuery字符插件之适合留言板的jquery文本框输入字符限制插件”的作用。这个插件专门用于帮助开发者实现在jQuery环境中对文本输入框的字符数量进行实时监控和限制。 jQuery是一个强大的JavaScript库,它简化...

    jQuery的车牌插件

    4. **兼容性**:由于是基于jQuery开发,所以该插件应具有良好的浏览器兼容性,能够在大部分现代浏览器上正常工作,包括桌面和移动端。 5. **易于集成**:作为一款jQuery插件,它应该提供简单的API接口和配置选项,...

    一个jQuery辅助的字符类型输入限制插件.rar

    一个jQuery辅助的字符类型输入限制插件,这个插件是先限制再输入,也就是当用户输入的时候,输入了不允许的字符,则不自动过滤掉该字符,不会显示在文本框中。这款插件的名字叫做jQuery AlphaNumeric,by Paulo P. ...

    jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.zip

    总的来说,这个“jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.zip”为开发人员提供了一套完整的解决方案,帮助他们快速构建吸引用户的互动抽奖功能。通过熟练运用HTML5、jQuery和JavaScript,开发者可以...

    jQuery 文本框字符限制插件 Textarea

    至于“给力技术.url”,这通常是一个快捷方式文件,指向一个关于jQuery Textarea插件的在线资源,如开发者的博客、教程或者示例页面。通过打开这个URL,我们可以获取更多的使用指南、示例代码以及可能的更新信息。 ...

    一个用于模拟打字效果的jQuery插件

    这个效果包括了字符逐个出现、回退删除以及可能的停顿和错误修正,使得动态显示的文字更具有真实感,可以用于创建引人入胜的故事叙述、教程或产品演示等场景。 标签“JavaScript开发-其它杂项”暗示这个插件是...

    jQuery超酷文字随机翻转变换动画特效

    5. **过渡动画**:为了使变换过程平滑,Flapper可能使用CSS3的过渡效果或者jQuery自身的动画方法,让字符的切换带有过渡效果。 6. **结束条件**:当所有字符经过一定的次数变换后,特效会停止并展示预设的文字,这...

    jquery 插件之 floattextbox 修改版

    总的来说,jQuery插件"floattextbox"修改版是一个优化了用户体验的输入组件,它结合了浮层效果和字符计数提示,使得在网页上进行文本输入变得更加便捷和直观。开发者可以通过研究其源码,学习如何使用jQuery和...

    Jquery网页排版插件

    总之,"Jquery网页排版插件"是前端开发中的一个重要工具,它利用jQuery库简化和优化了网页的布局和文本格式化。配合Java后端和MyEclipse这样的开发环境,可以构建出高效、互动性强的Web应用。具体到“davatron5000-...

    jquery表单验证插件

    jQuery Form插件由Malsup开发,是一款非常实用的jQuery扩展,能够极大地简化表单的Ajax提交过程。它不仅提供了一套完整的API来管理表单数据,还支持复杂的表单验证与文件上传等功能。 ##### 2.1 主要特性 - **Ajax...

    jQuery插件

    jQuery插件是jQuery生态系统的重要组成部分,它们扩展了jQuery的基本功能,提供了丰富的交互效果和实用工具,使得网页开发更加高效和便捷。 ### 一、jQuery插件的结构 一个基本的jQuery插件通常由以下几部分组成:...

    jQuery插件模拟支付宝密码输入框效果

    总的来说,通过使用jQuery插件模拟支付宝密码输入框效果,我们可以提升网站的安全感和用户体验,同时也能在一定程度上遵循Web无障碍标准,为所有用户提供一致的交互体验。这个过程涉及到JavaScript编程、CSS样式设计...

    jquery插件密码强弱

    在实际应用中,开发人员需要根据自身需求调整插件的配置,比如设置不同的强度阈值,或者自定义提示信息和样式。此外,考虑到现代Web的安全标准,插件还可能包含防止密码在页面源码中明文显示的机制。 总的来说,...

    jquery软键盘插件点击弹出软键盘输入密码效果

    在IT行业中,jQuery是一款非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。...在开发过程中,不断优化和完善插件,使之更加符合用户需求,是提升产品品质的关键。

Global site tag (gtag.js) - Google Analytics