| qwerty9 | Дата: Суббота, 24.10.2009, 18:03 | Сообщение # 1 |
|
Как всегда, в самом верху документа подключаем фреймворк, стили, другие скрипты. Не забываем про относительные пути к этим файлам. 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" поместить изображение и текст под ним. Текст в свою очередь должен находится внутри с классом "content": Code <div id="container"> <div class="slideBox"> <img src="images/picture1.jpg" alt="testing" /> <div class="content"> <h1>HTML Ipsum Presents</h1> <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> <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 код. На сегодня все! Всем удачи!!!
|
| |
| |
