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

Эффектное слайд-шоу на JavaScript
19.07.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Для одного из проектов понадобился небольшой скрипт слайд-шоу, который в бесконечном цикле показывает картинки с эффектом растворения. Вот что у меня получилось. Сперва надо подготовить элемент HTML-страницы, где будет происходить все это действо. Тут ничего сложного, единственно, что надо сразу же задать размеры области:Code (HTML) : Убрать нумерацию
- <div style="position: relative; height:600px; width:800px;"></div>
Code (HTML) : Убрать нумерацию
- <div style="position: relative; height:600px; width:800px;">
- <img style="position: absolute; top:0px;" id="sh_back" src="img/02.jpg">
- <img style="position: absolute; top:0px;" id="sh_front" src="img/01.jpg">
- </div>
Читать статью целиком »
Просмотров: 17371 | Комментариев: 9

Горизонтальное меню с вкладками на CSS и JavaScript
27.04.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Сегодня мы будем делать горизонтальное меню с вкладками для размещения на сайте. Но это не обычное навигационное меню, оно делается немного иначе, это меню для отображения различных блоков информации без перехода на другие страницы. Такое горизонтальное меню используется, например, в интернет-мгазинах, когда на одной странице представлено описание товара, фотографии, какие-нибудь дополнительные характеристики, отзывы посетителей и т.д., и вся эта информация переключается как раз таким меню с вкладками.Начнем с проектирования. Нам надо создать в HTML-коде меню с названиями вкладок и блоки с содержимым, которые соответствуют той или иной выбранной вкладке.
Code (HTML) : Убрать нумерацию
- <!-- меню с вкладками -->
- <ul id="menu">
- <li id="goods">Товар</li>
- <li id="descr">Описание</li>
- <li id="foto">Фотография</li>
- <li id="price">Цена</li>
- <li id="shops">Где купить</li>
- </ul>
- <!-- контейнер со страницами -->
- <div id="container">
- <div id="goods_content">Товар</div>
- <div id="price_content">Цена на товар</div>
- <div id="shops_content">Адреса магазинов</div>
- <div id="descr_content">Описание</div>
- <div id="foto_content">Фотографии</div>
- </div>
Читать статью целиком »
Просмотров: 16829 | Комментариев: 15

CSS: текст, зачеркнутый линией другого цвета
10.03.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Несколько вариантов реализации на CSS простенького эффекта выделения текста - зачеркивание его линией другого цвета. Когда-то передо мной встала такая задача, я с ней успешно справился. Потом решил поэкспериментировать и добиться этого же эффекта, но другими способами. Вот что у меня получилось. Общая суть всех примеров в том, что создается контейнер с перечеркивающей линией одного цвета, а в нем содержится текст другого цвета.Первый вариант, которым и была решена задача, - использование HTML-тега s или strike. Оба этих тега поддерживаются всеми браузерами, но с HTML 4.01 strike считается устаревшим, а в HTML5 вообще упразднен. Тем не менее, такой вариант имеет место быть.
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- .fixed_text_1 {
- color:#FF0000; /* цвет зачеркивающей линии */
- }
- .fixed_text_1 span {
- color:#000000; /* цвет зачеркиваемого текста */
- }
- </style>
- <s class="fixed_text_1"><span>Исправленному</span></s> верить
- <strike class="fixed_text_1"><span>Исправленному</span></strike> верить
Читать статью целиком »
Просмотров: 21780 | Комментариев: 2

Защита контента сайта от копирования
05.07.2012 | Категория: Web-мастеру и не только | Автор: ManHunter
Сразу же оговорюсь, что я категорически против использования на практике любых методов, описываемых в этой статье. Любой запрет только раздражает посетителей сайта и вряд ли кто-то захочет вернуться снова на страницу, которая, например, блокирует правую кнопку мышки или требует для просмотра текста включенный JavaScript. Максимум, что я признаю, это пассивная защита контента. Это не говоря о том, что любую защиту в случае реальной необходимости можно без особых проблем обойти. Но тем не менее, активная защита от копирования контента иногда встречается на некоторых сайтах. В этой статье я собрал методы активной защиты, которые встречал на практике.Первый способ, самый простой. Подавление событий выделения текста, движения и клика мышкой, копирования и вызова контекстного меню путем блокировки правой кнопки мыши. Ставится обработчик, который не дает событию всплывать по иерархии DOM и сразу же возвращает флажок отмены:
Code (JavaScript) : Убрать нумерацию
- function nocopy(event) {
- var event = event || window.event;
- if (event.preventDefault) { event.preventDefault(); }
- else { event.returnValue = false; }
- return false;
- }
- document.onmousedown = nocopy;
- document.onmouseup = nocopy;
- document.onmousemove = nocopy;
- document.ondragstart = nocopy;
- document.onselectstart = nocopy;
- document.ontextmenu = nocopy;
- document.oncopy = nocopy;
Читать статью целиком »
Просмотров: 23850 | Комментариев: 27

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

Горизонтальный скроллер на JavaScript
Захотел сделать горизонтальный скроллер для фотогалереи, естественно, без использования всяких сторонних скриптов. Условие: кроссбраузерность, валидная верстка и стандартные стили, поддержка колесика мыши. Начнем с верстки:
Code (HTML) : Убрать нумерацию
- <div class="scroller_container">
- <div class="scroller_navigate"><img src="images/left.gif" alt=""></div>
- <div class="scroller_window" id="scroller_window">
- <div class="scroller_row" id="scroller_row">
- <div id="scroller_rule">
- <!-- список превьюшек в линейке скроллера -->
- <a href="#"><img src="..." width="150" height="100" alt=""></a>
- <a href="#"><img src="..." width="150" height="100" alt=""></a>
- <a href="#"><img src="..." width="150" height="100" alt=""></a>
- <a href="#"><img src="..." width="150" height="100" alt=""></a>
- </div>
- </div>
- </div>
- <div class="scroller_navigate"><img src="images/right.gif" alt=""></div>
- </div>
Читать статью целиком »
Просмотров: 13658 | Комментариев: 21
