Движение картинки при наведении курсора

Категория JavaScripts (jQuery, AJAX)

Движение картинки при наведении курсора

Движение картинки при наведении курсора

Движение картинки при наведении курсора – урок о том как привести в движение картинку при наведении на нее “мышки” на jQuery.

Пример урока “Движение картинки при наведении курсора”

Стили:
<style>
div.Slide{
font-family:Tahoma;
width:300px;
height:300px;
position:relative;
float:left;
margin-right:25px;
margin-bottom:25px;
overflow:hidden;
border:5px solid #ccc;
}
div.Slide img{
position:absolute;
z-index:2;
width:300px;
height:300px;
}
div.Slide div.content{
position:absolute;
z-index:1;
padding:10px;
}
</style>

Подключение библиотеки jQuery:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

Определение функций jQuery:
<script type="text/javascript">
$(function(){
$("#topSlide").hover(
function(){$(this).find("img").stop().animate({top:-300},500);},
function(){$(this).find("img").stop().animate({top:0},500);});$("#leftSlide").hover(
function(){$(this).find("img").stop().animate({left:-300},500);},
function(){$(this).find("img").stop().animate({left:0},500);});$("#rightSlide").hover(
function(){$(this).find("img").stop().animate({right:-300},500);},
function(){$(this).find("img").stop().animate({right:0},500);});$("#bottomSlide").hover(
function(){$(this).find("img").stop().animate({bottom:-300},500);},
function(){$(this).find("img").stop().animate({bottom:0},500);});

$("#diagonalSlide").hover(
function(){$(this).find("img").stop().animate({left:-300,top:-300},500);},
function(){$(this).find("img").stop().animate({left:0,top:0},500);});
});

</script>

Пример блока (более подробно посмотрите исходный код примера):
<div id="topSlide">
<img src="img.jpg" />
<div>
текст
</div>
</div>

  • topSlide – картинка наверх
  • bottomSlide – уходит вниз
  • leftSlide – влево
  • rightSlide – вправо

Если не знаете что да как, вот урок – “Вводный курс в jQuery“

Другие посты, близкие по теме:

  1. checkbox в стиле iPhone
  2. Развертывание / сворачивание блока с текстом на jQuery
  3. Всплывающие подсказки на CSS
  4. Выпадающее меню на CSS
  5. Загрузка файла одним кликом
]]>

Добавить в закладки
Memori БобрДобр Google Яндекс Твиттер del.icio.us Мистер Вонг МоёМесто MyScoop RuSpace Сто закладок

]]>

Теги: ,

августа 3, 2009

1 комментарий по “Движение картинки при наведении курсора”

  1. ]]>Болат]]> сказал:
    июня 28, 2010 в 00:31

    Полезная статья! только как сделать чтобы картинка появлялась с верху при наведение на текст?

Оставьте комментарий: