Увеличение картинки при наведении на jQuery

Увеличение картинки при наведении на jQuery. Введение

Увеличение картинки при наведении на jQueryВ этой статье, я продолжу показывать примеры работы с библиотекой jQuery, и на очереди пример реализации увеличение картинки при наведении на jQuery. Такие простые вещи я практически всегда стараюсь реализовывать без сторонних библиотек, и это пример не исключение все напишем сами.
Начнем с того что разберемся, что и как будем делать: необходимо при наведении на картинку увеличивать ее размер, до заданного размера, а при отведении курсора уменьшать в исходное положение.

Увеличение картинки при наведении на jQuery. Код

Приступим к реализации. Набросаем простую верстку с картинкой:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Увеличение картинки при наведении на jQuery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
</head>
<body>
	<h2>Увеличение картинки при наведении на jQuery</h2>
	<img class="image" src="http://vk-book.ru/img/jquery_popup.gif" width="100" height="100" />
</body>
</html>

А теперь напишем javaScript, который будет увеличивать и уменьшать изображение при наведении курсора:

// действия после полной загрузки страницы
$(document).ready(function(){
	// объявляем переменные
	var image = $('.image'); // картинка
	var new_width = 200; // ширина для увеличения
	var new_height = 200; // высота для увеличения
	var start_width = image.attr('width'); // текущая ширина
	var start_height = image.attr('height'); // текущая высота
	
	image.hover(function(){
		// действие при наведении курсора
		// меняем размер картинки
		$(this).attr('width', new_width);
		$(this).attr('height', new_height);
	},function(){
		// действие при наведении курсора
		// меняем размер картинки
		$(this).attr('width', start_width);
		$(this).attr('height', start_height);
	});
});

Увеличение картинки при наведении на jQuery. Пример работы

На этом все, тут можно скачать исходники.

Рассказать друзьям:


Увеличение картинки при наведении на jQuery: 1 комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*