www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Вебдизайн с jQuery - это очень просто!
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
• Zoomy - лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery
Кнопка возврата в начало страницы
В предыдущей статье был рассмотрен способ плавного перемещения (скроллинга) по ссылкам на странице сайта. Частный вариант такого скроллинга - кнопка возврата в начало страницы.
Обычно кнопку возврата в начало страницы размещают в правом нижнем углу экрана и делают фиксированной, чтобы в любой момент можно было вернуться назад. Для этого достаточно задать положение кнопки следующими правилами CSS :
position:fixed; /*Расположение кнопки на странице: внизу справа с отступами 10рх*/
top:auto;
bottom:10px;
left:auto;
right:10px;
Для особо ленивых товарищей удобно вместо картинки кнопки использовать символы Юникода, оформив их с помощью правил CSS. О том, как выбрать подходящий символ-значок, рассказано в статье "Символы Юникода - полезные значки для сайта". Например, используя значок с кодом ⇑, можно получить следующую кнопку:
Оформление кнопки сделано с помощью следующих правил CSS:
border-radius:5px;
background-color:#ddd;
padding:8px 20px;
font-size:24px;
color:#333;
text-align:center;
Описанный способ имеет один недостаток: кнопка возврата наверх выводится постоянно. Чтобы она появлялась только при движении вниз по странице, можно использовать немного измененный скрипт - плагин jQuery liScrollToTop.
Работу этого плагина демонстрирует стрелка справа внизу этой страницы. Кроме появления кнопки только при скроллинге, в плагине добавлена анимация - плавное появление и исчезновение кнопки.
Установка плагина liScrollToTop
Как обычно, при установке плагинов jQuery сначала создадим на сайте новую папку, назвав её, конечно же, scrolltotop. Затем скачиваем архив и распаковываем его в созданную папку. Мы получим в ней два скрипта jquery-1.8.3.min.js, jquery.liScrollToTop.js и таблицу стилей liScrollToTop.css.
Далее, в заголовок страницы внутри тега <head>...</head> вставляем следующие строчки, где указан путь к новым файлам и небольшой javascript для инициализации плагина:
<link rel="stylesheet" href="scrolltotop/css/liScrollToTop.css" type="text/css"/>
<script src="scrolltotop/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="scrolltotop/js/jquery.liScrollToTop.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.scrollUp').liScrollToTop();
});
</script>
Картинку кнопки возврата размещаем в любом месте страницы (удобнее в конце) в теге DIV:
<div class="scrollUp"><img src="адрес изображения" alt="Кнопка" width="" height="" /></div>
Скорость анимации и скроллинга задается в файле jquery.liScrollToTop.js. Вы можете их менять, открыв файл в любом редакторе или Блокноте (комментарии на русском языке). Здесь же можно задать отступ от верха страницы (число строк), если нужно перемещаться не в самое начало.
Положение кнопки на странице сайта, её прозрачность, а также вид курсора при наведении задается в файле liScrollToTop.css.
15.07.2015 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: jquery фотогалерея, jquery слайдер, кнопка возврата в начало страницы, плагины jquery, установка jquery слайд-шоу
