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


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



Статистика
Онлайн всего: 6
Гостей: 5
Пользователей: 1
MaDaRa



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

Эффект при наведении на картинку через css и jQuery

Эффект при наведении на картинку через css и jQuery эффект, наведении, картинку

Установка:

После /head на нужных страницах вставляйте:
Code
<style type="text/css">
ul.gallery {
width: 708px;
list-style: none;
margin: 0 auto; padding: 0;
}

ul.gallery li {
float: left;
margin: 10px; padding: 0;
text-align: center;
border: 1px solid #ccc;
-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
display: inline; /*--Gimp Fix aka IE6 Fix--*/
}

ul.gallery li a.thumb {
width: 204px;
height: 182px;
padding: 5px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}

ul.gallery li span { /*--Used to crop image--*/
width: 204px;
height: 182px;
overflow: hidden;
display: block;
}

ul.gallery li a.thumb:hover {
background: #333;
}

ul.gallery li h2 {
font-size: 1em;
font-weight: normal;
text-transform: uppercase;
margin: 0; padding: 10px;
background: #f0f0f0;
border-top: 1px solid #fff; /*--Subtle bevel effect--*/
}

ul.gallery li a {text-decoration: none; color: #777; display: block;}
</style>

<script type="text/javascript">
$(document).ready(function() {
$("ul.gallery li").hover(function() { //On hover...
var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

//Set a background image(thumbOver) on the <a> tag  
$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

/Fade the image to 0  
$(this).find("span").stop().fadeTo('normal', 0 , function() {
$(this).hide() //Hide the image after fade
});  

} , function() { //on hover out...
//Fade the image to 1  
$(this).find("span").stop().fadeTo('normal', 1).show();
});

});
</script>

В то место, где будут картинки:
Code
<ul class="gallery">
<li>
<a href="Ссылка class="thumb"><span><img src="Ссылка на картинку" alt="" /></span></a>
<h2>Описание картинки</h2>
</li>

<li>
<a href="Ссылка class="thumb"><span><img src="Ссылка на картинку" alt="" /></span></a>
<h2>Описание картинки</h2>
</li>

<li>
<a href="Ссылка class="thumb"><span><img src="Ссылка на картинку" alt="" /></span></a>
<h2>Описание картинки</h2>
</li>

<li>
<a href="Ссылка class="thumb"><span><img src="Ссылка на картинку" alt="" /></span></a>
<h2>Описание картинки</h2>
</li>

</ul>
Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 2314 | Комментарии: 6 | Рейтинг: 5.0/3 | |Категория: Скрипты Разное | Добавил: Elik54245424 | Дата: 16.08.2011 | Скачали: 0
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 6
6 MrTiko   Дата: 17.08.2011  Время: 14:28   [№ 10039]
ctrl+c ))))))

2 $TVOL   Дата: 16.08.2011  Время: 18:55   [№ 10032]
Вот смотри

Ответ: не обязательно в комментарии показывать то что показали в новости.

1 myangels   Дата: 16.08.2011  Время: 18:36   [№ 10031]
Ну и КАК демо посмотреть?(

3 Elik54245424   Дата: 16.08.2011  Время: 19:59   1 [№ 10034]
А ссылку в спойлере скопировать тяжело?

4 $TVOL   Дата: 16.08.2011  Время: 23:27   2 [№ 10035]
Вообще то да. Т.к. она не копируется ХД

5 Elik54245424   Дата: 17.08.2011  Время: 00:32   3 [№ 10036]
хах =)


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

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


Поиск


На форуме

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

0

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

1

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

9

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

0

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

0

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

51

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

1

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

9

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

2

10 Уже все перепробовал )

1


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


Комментарии



Copyright UcozOn.ru™ © 2008-2016


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