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


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



Статистика
Онлайн всего: 7
Гостей: 7
Пользователей: 0



Главная » Файлы » Скрипты для 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>
Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 2361 | Комментарии: 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 Комплексный прогон сайт...

51

2 Нужны копирайты

0

3 Ищу работу

5

4 Ищу работу по продвижен...

1

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

2

6 Продам билеты в московс...

0

7 Нужны дизайнеры

1

8 Вакансия копирайтера/пе...

1

9 Верстка

13

10 Продажа ручного рерайта...

0


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


Комментарии



Copyright UcozOn.ru™ © 2008-2017


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