www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Вебдизайн с jQuery - это очень просто!
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
• Zoomy - лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery
Бегущая строка на основе jQuery
Ранее рассматривалось создание бегущей строки на сайте с помощью тега <marquee>...</marquee>. Этот простой способ имеет один существенный недостаток - пробел в виде пустой строки между сериями выводимой информации. Если для вывода текста это не принципиально, то для изображений выглядит не очень красиво.
Избавиться от этого пробела, а также улучшить внешний вид строки можно, использовав простой плагин библиотеки jQuery, разработанный Юрием Линником, автором множества полезных скриптов. Для создания бегущей строки на сайте им написан плагин liMarquee.
Пример бегущей строки с изображениями, созданной при помощи liMarquee, показан на рисунке:
В этом примере при наведении курсора движение строки останавливается и можно захватывать изображения мышью и перетаскивать их. Это удобно, если вы хотите внимательно рассмотреть какой-либо фрагмент бегущей строки.
Во втором примере картинки сделаны ссылками и их прозрачность меняется при наведении курсора. Кроме того, для разнообразия здесь изменено направление движения строки, а изображения также можно перетаскивать мышью:
Установка плагина liMarquee
Как обычно, начнём с создания новой папки, назвав её liMarquee. Затем надо скачать архив и распаковать его в созданную папку. Мы получим в ней два js-скрипта и файл стилей CSS.
Далее, в заголовок страницы внутри тега <head>...</head> вставляем следующие строчки, где указан путь к новым файлам, небольшой javascript для инициализации плагина и несколько правил CSS для оформления изображений (показан вариант для второго примера строки с изображениями-ссылками):
<link rel="stylesheet" href="liMarquee/liMarquee.css"/>
<script type="text/javascript" src="liMarquee/jquery-1.8.3.min.js"></script>
<script type="text/javascript"src="liMarquee/jquery.liMarquee.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.str').liMarquee();
});
</script>
<style type="text/css">
.str .str_item {
font-size:0;
line-height:0
}
.str img {
opacity:0.8
}
.str img:hover {
opacity:1
}
</style>
Изображения бегущей строки на странице сайта размещаем в теге <div>:
<div class="str str_wrap">
<a href="#"><img src="images_01.jpg" alt="Дом" /></a>
<a href="#"><img src="images_02.jpg" alt="Дом" /></a>
<a href="#"><img src="images_03.jpg" alt="Дом" /></a>
<a href="#"><img src="images_04.jpg" alt="Дом" /></a>
<a href="#"><img src="images_05.jpg" alt="Дом" /></a>
</div>
Естественно, для варианта без ссылок в теге <div>...</div> будут просто URL изображений. Обратите внимание, что перед картинками вставлен неразрывный пробел ( ) для более корректного вывода бегущей строки в некоторых браузерах.
Настройка параметров бегущей строки liMarquee
Все настраиваемые динамические параметры бегущей строки находятся в самом начале файла jquery.liMarquee.js. Они снабжены понятными комментариями на русском языке, и вы можете смело экспериментировать, меняя их в любом редакторе или Блокноте.
direction: 'left', //Указывает направление движения содержимого контейнера (left | right | up | down)
loop: -1, //Задает, сколько раз будет прокручиваться содержимое. "-1" для бесконечного воспроизведения движения
scrolldelay: 0, //Величина задержки в миллисекундах между движениями
scrollamount: 50, //Скорость движения контента (px/sec)
circular: true, //Если "true" - строка непрерывная
drag: true, //Если "true" - включено перетаскивание строки
runshort: true, //Если "true" - короткая строка тоже "бегает", "false" - стоит на месте
hoverstop: true, //true - строка останавливается при наведении курсора мыши, false - строка не останавливается
inverthover: false, //false - стандартное поведение. Если "true" - строка начинает движение только при наведении курсора
xml: false //Путь к xml файлу с нужным текстом
Оформление бегущей строки (цвет фона, рамка и др.) задаются, как обычно, с помощью CSS-правил в файле liMarquee.css.
Как видим, плагин liMarquee предоставляет для веб-дизайнера значительно больше возможностей, чем тег бегущей строки <marquee>. С его помощью можно выводить простой текст, изображения и HTML-файлы. Подробнее о реализации всех возможностей liMarquee с примерами смотрите на сайте разработчика. Там же вы найдете и другие интересные плагины jQuery, созданные Юрием Линником.
В заключение отмечу, что кроме специализированного плагина liMarquee, для создания бегущей строки на сайте можно использовать некоторые карусели изображений, так как они, в сущности, выполняют ту же функцию движения картинок или другого контента.
В следующей статье рассмотрим ещё один интересный вариант бегущей строки на основе jQuery - побуквенный вывод текста.
14.02.2014 г.
Ещё статьи по теме "Полезные мелочи веб-дизайна":
Создание иконки для сайта
Вывод текущей даты на сайте
Создание формы обратной связи на сайте
Создание "схемы проезда" на сайте
Создание выпадающего меню
Сжатие фотографий для интернета и электронной почты
Ключевые слова и продвижение сайта
Создание фона для сайта
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru