Приступим к реализации. Набросаем простую верстку с картинкой:
<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="ПУТЬ ДО КАРТИНКИ" 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