Добавить в избранное

Эффект тасующихся символов на jQuery

Дата: 2011-10-06

В данном уроке мы сделаем плагин jQuery, который тасует текст любого элемента DOM. Эффект можно использовать в заголовках, логотипах и слайдшоу.

 

Код

 


 

Сначала построим скелет нашего плагина jQuery. Код будет размещаться в самовыполняющейся анонимной функции.
assets/js/jquery.shuffleLetters.js

(function($){ 



$.fn.shuffleLetters = function(prop){ 



// Обрабатываем аргументы 

var options = $.extend({ 

// Значения по умолчанию 

},prop) 



return this.each(function(){ 

// Основной код плагина будет здесь 

}); 

}; 



// Вспомогательная функция 



function randomChar(type){ 

// Генерируем и  возвращаем случайный символ 

} 



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

}

 

Конечно, можно использовать один набор символов для замены. Но такое разделение создает более привлекательный эффект.

А теперь пишем тело плагина.

$.fn.shuffleLetters = function(prop){
var options = $.extend({ 
"step"      : 8,            
// Сколько раз должны меняться символы 
"fps"       : 25,           // Кадров в секунду 
"text"      : "",           // Использовать данный текс вместо содержимого
"callback"  : function(){}  // Выполняется при заверешении анимации
},prop) 
return this.each(function(){
var el = $(this),
str = "";
// Для предотвращения одновременных анимаций используем флаг 
if(el.data('animated')){ 
return true; 
}
el.data('animated',true); 
if(options.text) { 
str = options.text.split(''); 
} 
else { 
str = el.text().split(''); 
} 
// Массив types содержит типы символов 
// Массив letters сохраняет положение символов, отличных от пробела 
letters = []; 
// Looping through all the chars of the string
for(var i=0;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(""); 
// Самовыполняющаяся функция 
(function shuffle(start){ 
// Данный код выполняется несколько раз в секунду (определяется опцией fps) 
// и обновляет содержание элемента страницы 
var i, 
len = letters.length,
strCopy = str.slice(0); 
// Свежая копия строки 
if(start>len){ 
// Анимация завершена. Обновляем флаг и 
// запускаем возвратную функцию 
el.data('animated',false); 
options.callback(el); 
return; 
}
// Все работы выполняются здесь 
for(i=Math.max(start,0); i < len; i++){ 
//Аргумент start и опция step ограничивают символы, 
//которые обрабатываются за один раз 
if( i < start+options.step){ 
// Генерируем случайный символ в данной позиции 
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, если оно передано в качестве аргумента. Затем строка разделяется на символы и определяется их тип. Функция тасования использует setTimeout() для вызова самой себя и меняет случайным образом строку, обновляя элемент DOM на каждом шагу.

В демонстрации можно вводить свой собственный текст. Вот как реализована данная возможность:
<

assets/js/script.js
$(function(){ 
// Контейнер - элемент DOM; 
// userText - поле для текста 
var container = $("#container") 
userText = $('#userText'); 
// Тасуем содержание контейнера 
container.shuffleLetters(); 
// Привязываем события 
userText.click(function () { 
userText.val(""); 
}).bind('keypress',function(e){ 
if(e.keyCode == 13){ 
// Нажата клавиша ENTER 
container.shuffleLetters({ 
"text": userText.val() 
}); 
userText.val(""); 
} 
}).hide(); 
// Делаем паузу на 4 секунды 
setTimeout(function(){ 
// Тасуем контейнер пользовательским текстом 
container.shuffleLetters({ 
"text": "Проверьте его сами!"
}); 
userText.val("Введите что-нибудь...").fadeIn(); 
},4000); 
});

Фрагмент демонстрирует, как использовать плагин и параметр text.
 
сайт tiwebmaster.ru

 

Просмотров: 828

Последние 5 уроков

Обработка AJAX с помощью jQuery (часть 2)

В предыдущем уроке серии мы дали общее определение технологии AJAX и рассмотрели простой пример с использованием метода $.get(). Теперь продвинемся дальше и посмотрим, что еще можно делать с помощью AJAX и как.


Обработка AJAX с помощью jQuery (часть 1)

Первая статья посвящеа общему описанию технологии AJAX и потроение запросов при помощи метода $.get().


Размножения полей формы на сайте

Здравствуйте! уважаемые читатели Бывают ситуации когда нужно добавить на сайте несколько данных по одному критерию, можно несколько раз добавлять данные но это не проффесионально поэтому я предлогаю материал по добавлению полей при помощи jQuery.


Автосохранение данных, введенных в поля формы

Представьте, какую бурю эмоций испытает пользователь, которому нужно добавить всего лишь пару символов, чтобы отправить форму с большим объемом вручную заполненных полей, и вдруг все данные теряются. Ужасно. Если, конечно, нет способа восстановить данные, чтобы избежать участи Сизифа.


10 вставок кода jQuery

jQuery вдохнул новую жизнь в JavaScript. В данном уроке приводится 10 вставок кода jQuery, которые облегчат решение повседневных задач, возникающих при создании веб приложений.


Видео уроки по php,jquery,ajax,css,html,сео