Уроки Увеличение картинки при наведении курсора JQuery
1 мая 2015
5446
Увеличение картинки при наведении курсора, JQuery

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

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

Первым делом хочу Вас всех поздравить с наступившими майскими праздниками и пожелать отличного весеннего настроения, а также прекрасно провести время с родными и близкими! Ну, а сегодняшний материал, я решил посветить одной теме про увеличение картинки при наведении курсора мышки, которая в принципе очень простая и ничего сложного в ней нет, кто имеет начальную базу знаний на 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, мы прописываем тег img и указываем путь к нашей картинке.

 

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

 

Создаем папку img, в которой будем хранить наши картинки, в данном случае, там у меня лежит только одна картинка.

 

Увеличение картинки при наведении курсора JavaScript

 

 

Вторая часть. 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;
}

 

Кстати, имеется еще один похожий пример, - увеличение картинки на JavaScript и CSS, но там необходимо не наводить на картинку, а нажимать на нее, но принцип действий аналогичен данному примеру. Огромное спасибо всем за внимание и отличных Вам выходных!





Роман Краутер