JQuery plug-in development tutorial on random character conversion effect-

In this quick jQuery plug-in development tutorial, we will create a jQuery plug-in to display the text content of any DOM element in random order-this will be a very interesting effect, it can be used in titles, logos, and their magic lights .........,. In this quick jQuery plug-in development tutorial, we will create a jQuery plug-in to display the text content of any DOM element in random order-this will be a very interesting effect, it can be used in titles, logos, and slides.

Online Demo online download

Code snippet

In the first part, we will develop the basic architecture of the jQuery plug-in. We will put the code into a self-running method and extend $. 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);

Next we will focus on the method with randomChar. It will accept a type parameter (Lowerletter, upperletter, or symbol) and return a random character.

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)];}

We should have used a simple character pool to save all the characters, but this will have a better effect.

Now let's write the body part of the plug-in:

$.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);    });};

This plug-in can accept the content of the called DOM element, or the text attribute of the object passed in as a parameter. It then splits the string into characters and determines the type used. This shuffle function uses setTimeout () to call itself and randomly generate strings to update DOM elements. If you are not clear about the use of setTimeout (), refer to this article: http://www.gbin1.com/technology/jqueryhowto/fadeoutonebyone/, calling the seTimeout method can help you execute some operations at a specific interval.

The above is the content of the jQuery plug-in development tutorial for the effect of random character conversion. For more information, see PHP Chinese Network (www.php1.cn )!