www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Веб-дизайн и поисковая оптимизация

Логотип Софт

Вебдизайн с jQuery - это очень просто!

Побуквенный вывод текста на основе jQuery

Ранее рассматривалось создание бегущей строки на сайте с помощью тега <marquee>...</marquee> и с помощью плагина jQuery liMarquee. Еще один интересный частный вид бегущей строки - побуквенный вывод текста - также легко сделать, используя jQuery. Пример такого побуквенного вывода показан внизу (если эффект не виден, обновите страницу, так как он не зациклен):

- Лучше поздно, чем никогда, - сказал Рабинович, ложась на рельсы и глядя вслед уходящему поезду...

Вариантов скриптов для побуквенного вывода текста можно найти множество, но часто они либо сложные, либо не работают в браузере Internet Explorer (must die!). Этих недостатков лишен скрипт, созданный Катериной Рыбченко из Украины. Именно с его помощью и сделан показанный выше пример. Подробное описание скрипта можно найти на странице "Пишущийся текст на jQuery" сайта Катерины Рыбченко.

Установка скрипта побуквенного вывода текста

Сначала необходимо вставить в заголовок страницы, где планируется использовать побуквенный вывод текста, внутрь тега <head>...</head> следующие строчки, указывающие путь к файлу jQuery, сам скрипт и правило CSS, определяющее курсор, имитирующий ввод текста (нижнее подчеркивание):

<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<script type=
"text/javascript">
$(function(){
var a = new String;
a = $('.text_cont_inner').text();
$('.text_cont_inner').text('');
var c=a.length;
j=0;
setInterval(function(){
if(j<c){
$('.text_cont_inner').text($('.text_cont_inner').text()+a[j]);
j=j+1;
}
else {$('.text_cont_inner').removeClass('after')}
},150);
});
</script>
<style type=
"text/css">
.after:after {
content:'_';
}
</style>

Если у вас на сайте не используются плагины библиотеки jQuery, то необходимо скачать любую её версию и разместить на сайте. Например, в данном примере используется версия jQuery-1.9.1.min.js. Скачать её можно здесь, а затем распаковать в любую папку на сайте (в нашем примере, папка scripts). Можно jQuery не загружать на сайт, а обращаться к внешнему ресурсу. В этом случае первую строчку показанного выше кода следует заменить на такую:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Для работы скрипта необходимо указать для контейнера, в котором размещен текст побуквенного вывода class="text_cont_inner after". Это может быть <div>, <p>, <h1....h6> и другие. Конечно, для оформления текста вы можете дополнительно использовать любые средства CSS.

Скорость появления букв в мс задается числовым параметром в скрипте. Для нашего примера - это значение 150мс. Если вы не хотите выводить имитатор курсора (подчеркивание), то просто удалите правило CSS.

3.04.2015 г.

Ещё статьи по теме "Полезные мелочи веб-дизайна":
Создание иконки для сайта
Вывод текущей даты на сайте
Создание формы обратной связи на сайте
Создание "схемы проезда" на сайте
Создание выпадающего меню
Сжатие фотографий для интернета и электронной почты
Ключевые слова и продвижение сайта
Создание фона для сайта

Задать вопрос автору





Яндекс.Метрика
Продажа радиодеталей. Преобразователи напряжения

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: создание бегущей строки на сайте, сделать бегущую строку, бегущая строка, jQuery, побуквенный вывод текста на основе jQuery