www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Вебдизайн с jQuery - это очень просто!
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
• Zoomy - лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о 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:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru