[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Создание классного эффекта при наведении мышки на изображени
z1MO_oK [ Offline ] Дата: Среда, 12.08.2009, 14:54:29 | Сообщение # 1
Читатель
Сообщений: 123
[ 78 ]
Награды: 1  
В этом уроке пойдет речь о том, как сделать так, чтобы под изображением находился необходимый текст, и при наведении мышкой на изображений, этот текст красиво занимал место изображения.
Все будет проделано благодаря замечательному фреймворку jQuery.
Как всегда, в самом верху документа подключаем фреймворк, стили, другие скрипты. Не забываем про относительные пути к этим файлам.

Code
<link rel="stylesheet" href="css/reset.css" />    
    <link rel="stylesheet" href="css/style.css" />    
       
    <script type="text/javascript" src="jquery.min.js"></script>    
    <title>Untitled Document</title>    
       
    <script type="text/javascript">    
    $(function() {    
    $(".slideBox").hover(function(){    
    $(this).find("img").stop().animate({    
    top:-325    
    }, 500);    
    }, function(){    
    $(this).find("img").stop().animate({    
    top:0    
    }, 500);    
    });    
    });    
    </script>   

Теперь в теле документа нам необходимо в слой с классом "slideBox" поместить изображение и текст под ним. Текст в свою очередь должен находится внутри <div> с классом "content":

Code
<div id="container">    
       
    <div class="slideBox">    
    <img src="images/picture1.jpg" alt="testing" />    
       
    <div class="content">    
    <h1>HTML Ipsum Presents</h1>    
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>    
    </div>    
       
    </div>    
    </div><!--end slideBox-->    
       
    <div class="slideBox">    
    <img src="images/picture2.jpg" alt="testing" />    
    <div class="content">    
    <h1>HTML Ipsum Presents</h1>    
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>    
    </div>    
    </div>    
    </div><!--end slideBox-->    
       
    </div><!--end container-->

Как Вы видите под картинкой может быть не просто текст, а полноценный HTML код.

На сегодня все! Всем удачи!!!

 
  • Страница 1 из 1
  • 1
Поиск:
 
 
Последние темы Популярные темы Лучшие флудеры Новые пользователи

Конкурс "Угадай автомобиль"

(78)

Порно С Юной Девкой _952P

(2)

Скачать Трах Пэрис Хилтон _686O

(3)

Баги, ошибки на сайте

(21)

Сделано так как у вас.

(1)

FAQ по uCoz

(6)

Конверты на выписку весна лето от компании Baby Goldfinch

(0)

Здесь заказываем программы,ключи,keygen,patch

(5)

Ваш оператор

(6)

Какую трубу вы бы хотели?

(7)

Общение

(993)

GOLD-аккаунты к другим файлообменникам

(383)

GOLD-аккаунты к Letitbit.net

(233)

GOLD-аккаунты к Vip-file.com

(156)

Поиграем в смайлики

(115)

GOLD-аккаунты к другим файлообменникам

(93)

8-знак

(86)

Конкурс "Угадай автомобиль"

(78)

считаем до 100 и обратно

(77)

Раздача ICQ-номеров!

(61)

SToRm1k

(2948)

-==S_k_i_F==-

(632)

k1ngSD

(608)

mimonetut

(412)

SmaileS

(400)

Kojin

(387)

Rmk

(370)

adrefefex

(357)

}{0TT@БЬ)Ч

(341)

Aldo

(306)

ttaletfzfe

(19:57:44)

ztaletaxuz

(06:59:26)

ctaletkrzs

(06:59:01)

gtaleteljd

(16:47:55)

staletmhfr

(12:49:05)

btaletkokj

(08:58:29)

ukvartirachink

(12:11:40)

etaletcxbm

(07:46:24)

leifwoolnug

(09:15:37)

ytaletiomo

(01:19:02)

Новых сегодня:0

 
 
Владельцы и создатели данного сайта не несут ответственность за использование и содержание ссылок и информации, представленных на этом сайте.
Переделка шаблона by SToRM.Сайт оптимизирован для просмотра с разрешением
1024x768, 1280x800, 1280x1024 и 1600x1200 браузером Opera.
PR-CY.ru