В уроке рассмотрим создание слайд эффекта при наведении мышки. Эфект и интерактивен и функционален. Эффект заключается в том, чтобы под изображением находился необходимый текст, и при наведении мышкой на изображений, этот текст красиво занимал место изображения. Что не быть голословным вот пример. А также тут можно сказать и все исходники нашего урока. Все реализовано на любимым нами jQuery.
Как всегда, в самом верху документа подключаем фреймворк, стили, другие скрипты. Не забываем про относительные пути к этим файлам.
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/style.css" /> <script type="text/javascript" src="javascript/jquery.min.js"></script> <title>Эффект для изображений - world-blog.ru</title> <script type="text/javascript"> $(function() { $(".slideBox").hover(function(){ $(this).find("img").stop().animate({ top:-325 }, 800); }, function(){ $(this).find("img").stop().animate({ top:0 }, 800); }); }); </script> </head>
Теперь в теле документа нам необходимо в слой с классом «slideBox» поместить изображение и текст под ним. Текст в свою очередь должен находится внутри <div> с классом «content»:
<div id="container"> <div class="slideBox"> <img src="images/picture1.jpg" alt="testing" /> <div class="content"> <h1>Блог World Programs. Ajax, SEO, Linux, PHP, Mysql, Adobe, Дизайн и другие статьи.</h1> <p>В этом блоге наша команда собирает самые интересные материалы посвященные веб программированию, веб дизайну, верстке и т.д., одним словом связаные с нашей работой. Это общедоступный архив наиболее интересных материалов нашей компании. </p> </div> </div> </div>
Как Вы видите под картинкой может быть не просто текст, а полноценный HTML код — функционально и интерактивно. Как говарится другого не держим