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

В этой статье, я продолжу показывать примеры работы с библиотекой 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. });


  16.05.24 / 20:27 | JS/jQuery |   109 | 2   0