Jquery Latter Shuffle

时间:2014-02-03 14:32:48

标签: javascript jquery html css jquery-animate

我尝试使用此插件 Text Shuffle Plugin

动画(随机播放)预先输入的文字

但问题是,这只在我们输入文本框时才有用。我想在页面加载时这样做。

这是在线演示链接。的 DEMO

这是小提琴链接。的 Fiddle

不幸的是我无法创造它的小提琴。我只想在预定义的ID上加载效果

JS代码

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

    });
};

0 个答案:

没有答案