Приветствую Вас Прохожий | RSS Воскресенье, 11.12.2016, 14:53
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 15
Гостей: 14
Пользователей: 1
sergaw



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

Эффект Изменяющий цвет шапки для сайта

подключим jQuery к нашему документу: у всех он есть на саитах та как он для работы многих скриптов

Code
<script type="text/javascript" src="..../jquery.js"></script>

Шаг 2.

Между тегами или в отдельном CSS файле пропишем следующие стили:

Code
body {  

background: #534741;  

font-family: Helvetica, Arial, sans-serif;  

color: #fff;  

width: 810px;  

margin: 0 auto;  

padding-bottom: 50px;  

}  

#header {  

margin: 0;  

padding: 0;  

text-indent: -9999px;  

width: 400px;  

height: 225px;  

position: relative;  

margin-left: -1em;  

background: url(header.jpg) no-repeat;  

}  

#header a {  

position: absolute;  

top: 0;  

left: 0;  

width: 400px;  

height: 225px;  

display: block;  

border: 0;  

background: transparent;  

overflow: hidden;  

}  

#header .fake-hover {  

margin: 0;  

padding: 0;  

width: 400px;  

height: 225px;  

display: block;  

position: absolute;  

top: 0;  

left: 0;  

background: url(header.jpg) no-repeat 0 -240px;  

}

Обратите внимание, что фоновый цвет страницы (в данном случае стиль тега ) должен быть точно такой же, как и цвет по краям у картинки шапки.

Для шапки нужно использовать картинку, которая условно состоит из двух частей: верхняя половина - это картинка до наведения мышью, а нижняя - после.

В нашем случае используется картинка размером 400х450 px. Следовательно, половина ее высоты равна 225 px (эта высота прописана в стиле #header).

И если высота Вашей картинки будет другая, то ее нужно изменить в CSS стиле, а также изменить отступ no-repeat 0 -240px в стиле #header .fake-hover, умножив половину высоты картинки на -1,0667.

Т.е. 225 х -1,0667 = -240

Если же половина высоты картинки будет 150 px, то:

150 х -1,0667 = -160

Шаг 3.

Между тегами пропишем следующий скрипт:

Code
<script type="text/javascript">  

  var Header = {  

addFade : function(selector){  

$("<span class=\"fake-hover\"></span>").css("display", "none").prependTo($(selector));  

$(selector+" a").bind("mouseenter",function(){  

$(selector+" .fake-hover").fadeIn("slow");  

});  

$(selector+" a").bind("mouseleave",function(){  

$(selector+" .fake-hover").fadeOut("slow");  

});  

}  

};  

$(function(){  

Header.addFade("#header");  

});  

</script>

Шаг 4.

В начале тела документа (после открывающегося тега ) вставим блок шапки с идентификатором header, в качестве ссылки укажем произвольный текст (в данном случае Header)

Code
<div id="header"><a href="">Header</a></div>
Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 3835 | Комментарии: 1 | Рейтинг: 1.0/1 | |Категория: Скрипты Разное | Добавил: ALINA | Дата: 16.05.2010 | Скачали: 0 | Теги: эффект, цвет, шапки, сайта, Для, Изменяющий
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 1
1 miug   Дата: 14.09.2012  Время: 12:15   [№ 13676]
хорошо бы поставить пример что бы увидеть какой эффект получается


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Продажа рекламные мест ...

2

2 Файловик. Уникальные те...

0

3 Куплю сайты в индексе Я...

1

4 Куплю сайты с ТИЦ/PR (п...

9

5 Предлагаю услуги для ан...

0

6 Предлагаю услуги по про...

0

7 Комплексный прогон сайт...

51

8 Сайт онлайн фильмов на ...

1

9 Проблема с таблицей

9

10 Отредактировать фото

2


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru