50

Как увеличить картинку при наведении курсора на JQuery

В этой теме теме я научу вас увеличению изображения при наведении курсора мышки, которая в принципе очень простая и ничего сложного в ней нет, кто имеет начальную базу знаний на JQuery.
Этот скрипт, может Вам пригодиться в разных случаях, ну к примеру к плавному увеличению фотографий и возвращению к исходному положению или при плавном увеличении ссылки, а может и в другой какой-то ситуации. В общем, все зависит от Ваших идей и конкретных задач. 

Первая часть. HTML.

Подключаем необходимые нам файлы, это будут стандартные стили css, а также js-файлы, которые нужны для работы скрипта.

<link type="text/css" rel="stylesheet" href="css/demo.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/img.js"></script>

Теперь пропишем ссылку и обязательно дадим ей класс url, с помощью которого наша картинка будет увеличиваться.

<a href="#" class="url"><img src="img/1.jpg"></a>

Вторая часть. JQUERY.

Переходим к самой основной части нашего скрипта. Создаем функцию, которая обращается к ссылке и классу url, сначала при наведении (hover) на картинку и с помощью обращения к классу url, придаем нашему изображению анимацию (animate), в последствии чего картинка увеличивается. Функция animate предназначена для плавного изменения CSS свойств у элементов. При отведении курсора мышки от картинки, она возвращается в исходное положение, так как CSS свойства, для данного примера, заданы по высоте и ширине, равным свойствам, исходного начального положения картинке.

$(document).ready(function(){
   $("a.url").hover(function() {
    $("a.url img").animate({width:"150px", height:"150px"}, 700); 
    },
    function(){
     $(".url img").animate({width:"100px", height:"100px"}, 1400);
    }
  );
});

Третья часть. CSS.

Ну и немного добавим стилей css, только лишь для красоты. Сделаем картинку круглой и придадим ей рамку, а также определенные отступы для данного примера.

img{
	border-radius: 100%;
	border: 1px solid #000000;
	margin-top: 10px;
	margin-left: 50px;
}

Cпасибо всем за внимание

 

0 комментариев

Написать сообщение

Пожалуйста, оцените по 5 бальной шкале