首页 > web前端 > H5教程 > 正文

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

PHP中文网
发布: 2016-05-17 09:09:29
原创
1512人浏览过

在这篇快速的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;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插件开发教程的内容,更多相关内容请关注PHP中文网(www.php.cn)!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号