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

Пример реализации увеличение картинки при наведении на jQuery.
Начнем с того что разберемся, что и как будем делать: необходимо при наведении на картинку увеличивать ее размер, до заданного размера, а при отведении курсора уменьшать в исходное положение.

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

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

А теперь напишем javaScript, который будет увеличивать и уменьшать изображение при наведении курсора:
  1. // действия после полной загрузки страницы
  2. $(document).ready(function(){
  3.     // объявляем переменные
  4.     var image = $('.image'); // картинка
  5.     var new_width = 200; // ширина для увеличения
  6.     var new_height = 200; // высота для увеличения
  7.     var start_width = image.attr('width'); // текущая ширина
  8.     var start_height = image.attr('height'); // текущая высота
  9.  
  10.     image.hover(function(){
  11.         // действие при наведении курсора
  12.         // меняем размер картинки
  13.         $(this).attr('width', new_width);
  14.         $(this).attr('height', new_height);
  15.     },function(){
  16.         // действие при наведении курсора
  17.         // меняем размер картинки
  18.         $(this).attr('width', start_width);
  19.         $(this).attr('height', start_height);
  20.     });
  21. });

  20.04.24 / 17:46 | JS/jQuery |   139 | 1   0