Blog. Just Blog

Быстрый поиск

Введите фрагмент названия статьи для поиска

Эффектное слайд-шоу на JavaScript

19.07.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Для одного из проектов понадобился небольшой скрипт слайд-шоу, который в бесконечном цикле показывает картинки с эффектом растворения. Вот что у меня получилось. Сперва надо подготовить элемент HTML-страницы, где будет происходить все это действо. Тут ничего сложного, единственно, что надо сразу же задать размеры области:
  1. <div style="position: relative; height:600px; width:800px;"></div>
Теперь подумаем, как сделать плавное перетекание одного изображения в другое. Есть разные варианты, я остановился на следующем. Берутся два изображения и накладываются одно на другое. Затем у верхнего изображения по таймеру изменяется значение прозрачности, постепенно уменьшаясь до полностью прозрачного. В результате мы видим нижнее изображение сквозь "растаявшее" верхнее. На следующем этапе надо поменять изображения, нижнее переходит вместо верхнего, а на место нижнего изображения загружается следующее по списку. Для пользователя этот этап останется незаметным, так как он уже видит фоновую картинку и браузеру не надо ее ниоткуда загружать, а новая картинка располагается под видимой и процесс ее загрузки во время паузы между сменой кадров остается незаметным. А после первого прохода слайд-шоу все изображения вообще будут браться из кэша браузера. В виде HTML исходное положение слайд-шоу будет выглядеть примерно так:
  1. <div style="position: relative; height:600px; width:800px;">
  2.    <img style="position: absolute; top:0px;" id="sh_back" src="img/02.jpg">
  3.    <img style="position: absolute; top:0px;" id="sh_front" src="img/01.jpg">
  4. </div>
Осталось воплотить теорию на практике. Слайд-шоу у нас выполняется в два повторяющихся этапа: пауза между переходами, когда картинка отображается без изменений, и цикл с применением эффекта растворения. Причем каждое это действие в конце запускает следующее. Для каждого этапа напишем свою функцию на JavaScript.

Читать статью целиком »
Просмотров: 17371 | Комментариев: 9

Горизонтальное меню с вкладками на CSS и JavaScript

27.04.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Сегодня мы будем делать горизонтальное меню с вкладками для размещения на сайте. Но это не обычное навигационное меню, оно делается немного иначе, это меню для отображения различных блоков информации без перехода на другие страницы. Такое горизонтальное меню используется, например, в интернет-мгазинах, когда на одной странице представлено описание товара, фотографии, какие-нибудь дополнительные характеристики, отзывы посетителей и т.д., и вся эта информация переключается как раз таким меню с вкладками.

Начнем с проектирования. Нам надо создать в HTML-коде меню с названиями вкладок и блоки с содержимым, которые соответствуют той или иной выбранной вкладке.
  1. <!-- меню с вкладками -->
  2. <ul id="menu">
  3.   <li id="goods">Товар</li>
  4.   <li id="descr">Описание</li>
  5.   <li id="foto">Фотография</li>
  6.   <li id="price">Цена</li>
  7.   <li id="shops">Где купить</li>
  8. </ul>
  9.  
  10. <!-- контейнер со страницами -->
  11. <div id="container">
  12.   <div id="goods_content">Товар</div>
  13.   <div id="price_content">Цена на товар</div>
  14.   <div id="shops_content">Адреса магазинов</div>
  15.   <div id="descr_content">Описание</div>
  16.   <div id="foto_content">Фотографии</div>
  17. </div>
Связь между вкладками и блоками с содержимым выполняется через их атрибут id, для связанных блоков этот атрибут формируется из id вкладки путем добавления к нему строки "_content". Такой способ позволяет размещать блоки с контентом в произвольном порядке, независимо от порядка следования вкладок.

Читать статью целиком »
Просмотров: 16829 | Комментариев: 15

CSS: текст, зачеркнутый линией другого цвета

10.03.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Несколько вариантов реализации на CSS простенького эффекта выделения текста - зачеркивание его линией другого цвета. Когда-то передо мной встала такая задача, я с ней успешно справился. Потом решил поэкспериментировать и добиться этого же эффекта, но другими способами. Вот что у меня получилось. Общая суть всех примеров в том, что создается контейнер с перечеркивающей линией одного цвета, а в нем содержится текст другого цвета.

Первый вариант, которым и была решена задача, - использование HTML-тега s или strike. Оба этих тега поддерживаются всеми браузерами, но с HTML 4.01 strike считается устаревшим, а в HTML5 вообще упразднен. Тем не менее, такой вариант имеет место быть.
  1. <style type="text/css">
  2. .fixed_text_1 {
  3.     color:#FF0000;  /* цвет зачеркивающей линии */
  4. }
  5. .fixed_text_1 span {
  6.     color:#000000;  /* цвет зачеркиваемого текста */
  7. }
  8. </style>
  9.  
  10. <class="fixed_text_1"><span>Исправленному</span></sверить
  11. <strike class="fixed_text_1"><span>Исправленному</span></strikeверить
Если почитать документацию по HTML, то там написано, что вместо этих тегов рекомендуется использовать тег del. Кроме визуального эффекта, он является еще и семантически более правильным, если требуется выделить текст, который утратил актуальность.

Читать статью целиком »
Просмотров: 21780 | Комментариев: 2

Защита контента сайта от копирования

05.07.2012 | Категория: Web-мастеру и не только | Автор: ManHunter
Сразу же оговорюсь, что я категорически против использования на практике любых методов, описываемых в этой статье. Любой запрет только раздражает посетителей сайта и вряд ли кто-то захочет вернуться снова на страницу, которая, например, блокирует правую кнопку мышки или требует для просмотра текста включенный JavaScript. Максимум, что я признаю, это пассивная защита контента. Это не говоря о том, что любую защиту в случае реальной необходимости можно без особых проблем обойти. Но тем не менее, активная защита от копирования контента иногда встречается на некоторых сайтах. В этой статье я собрал методы активной защиты, которые встречал на практике.

Первый способ, самый простой. Подавление событий выделения текста, движения и клика мышкой, копирования и вызова контекстного меню путем блокировки правой кнопки мыши. Ставится обработчик, который не дает событию всплывать по иерархии DOM и сразу же возвращает флажок отмены:
  1. function nocopy(event) {
  2.     var event event || window.event;
  3.     if (event.preventDefault) { event.preventDefault(); }
  4.     else { event.returnValue false; }
  5.     return false;
  6. }
  7.  
  8. document.onmousedown nocopy;
  9. document.onmouseup nocopy;
  10. document.onmousemove nocopy;
  11. document.ondragstart nocopy;
  12. document.onselectstart nocopy;
  13. document.ontextmenu nocopy;
  14. document.oncopy nocopy;
Способ кроссбраузерный, но, к счастью, прекрасно обходится через выделение всего текста клавишами Ctrl+A и последующего его копирования. В Firefox через настройки обходится защита от блокировки контекстного меню.

Читать статью целиком »
Просмотров: 23850 | Комментариев: 27

Горизонтальный скроллер на JavaScript

17.08.2011 | Категория: Web-мастеру и не только | Автор: ManHunter

Горизонтальный скроллер на JavaScript

Захотел сделать горизонтальный скроллер для фотогалереи, естественно, без использования всяких сторонних скриптов. Условие: кроссбраузерность, валидная верстка и стандартные стили, поддержка колесика мыши. Начнем с верстки:
  1. <div class="scroller_container">
  2.   <div class="scroller_navigate"><img src="images/left.gif" alt=""></div>
  3.     <div class="scroller_window" id="scroller_window">
  4.       <div class="scroller_row" id="scroller_row">
  5.         <div id="scroller_rule">
  6.           <!-- список превьюшек в линейке скроллера -->
  7.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  8.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  9.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  10.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  11.         </div>   
  12.       </div>
  13.     </div>
  14.   <div class="scroller_navigate"><img src="images/right.gif" alt=""></div>
  15. </div>
Дополнительный элемент scroller_rule приходится использовать, чтобы получить полную ширину всей полосы скроллера с превьюшками. Элементы scroller_navigate содержат левую и правую стрелочки для прокрутки. Теперь надо создать таблицу стилей для оформления. "Окно" скроллера должно быть фиксированного размера и без полос прокрутки, а полоса скроллера будет перемещаться относительно этого окна, за счет этого будет достигаться эффект плавной прокрутки. Для большей красоты я взял фоновый рисунок, имитирующий фотопленку.

Читать статью целиком »
Просмотров: 13658 | Комментариев: 21

Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2025
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 3 (0.0027 сек.) / Память: 4.5 Mb
Наверх