افکت نمایش جالب کلمات

افکت نمایش جالب کلمات

در این آموزش ما به شما نحوه ساخت یک پلاگین jQuery را می دهیم که برای نمایش جالب یک جمله به کار می رود و شما میتونید از این پلاگین بای نمایش جملات بزرگان،خبر های فوری و یا هر چیز دیگری استفاده کنید.

برای مشاهده لینک وارد شود

اولین کار ما نوشتن پایه ها و ستون فقرات پلاگین مان میباشد.

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 که کار تولید و نمایش انواع حروف را بر عهده دارد را مینویسیم

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

البته ما میتوانیم فقط از یک نوع حروف استفاده کنیم(حروف کوچک یابزرگ) ولی اگر از همه نوع استفاده کنیم این کار به پلاگین ما چهره خوبی می دهد و باعث جذاب شدن آن میشود.

اکنون بدنه پلاگین را مینویسیم

$.fn.shuffleLetters = function(prop){

    var options = $.extend({
        "step"	: ۸,	// How many times should the letters be changed
        "fps"	: ۲۵,	// 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++){ and="" ch="=" code="" contents="" copy="" element="" else="" executing="" expression:="" fresh="" function="" is="" len="letters.length," named="" of="" options.fps="" page="" per="" run="" second="" self="" start="" strcopy="str.slice(0);" string="" the="" this="" times="" updates="" var="">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);

            },۱۰۰۰/options.fps);

        })(-options.step);

    });
};

این پلاگین محتویات عنصر DOM را onn فراخوانی می کند.سپس نوع هر یک از حروف را مشخص می کند و سپس تابعshuffle از ()setTimeout برای انتخاب تصادفی حروف استفاده می کند.

سپس همانطور که در پیش نمایش مشاهده خواهید کرد میتونید متن دلخواهی را وارد کرده و آن را با افکت مذکور به نمایش در آورید که کد آن را در زیر آوردیم

assets/js/script.js

$(function(){

    // container is the DOM element;
    // userText is the textbox

    var container = $("#container")
        userText = $('#userText'); 

    // Shuffle the contents of container
    container.shuffleLetters();

    // Bind events
    userText.click(function () {

      userText.val("");

    }).bind('keypress',function(e){

        if(e.keyCode == 13){

            // The return key was pressed

            container.shuffleLetters({
                "text": userText.val()
            });

            userText.val("");
        }

    }).hide();

    // Leave a 4 second pause

    setTimeout(function(){

        // Shuffle the container with custom text
        container.shuffleLetters({
            "text": "Test it for yourself!"
        });

        userText.val("type anything and hit return..").fadeIn();

    },۴۰۰۰);

});

پایان

 

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


نُه × 1 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>