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

  • Не нравится
  • +3
  • Нравится
Вот небольшой скрипт, который позволяет при наведении на картинку увеличить ее до нужного размера.


<script type="text/javascript">
$(function(){
$('.zvzoom').hover(function(){
$(this).stop().animate({width:"50%",height:"50%",left:"-25px",top:"-25px"}, 400);
},
function(){
$(this).stop().animate({width:"230px",height:"325px",left:"0",top:"0"}, 400);
});
});
</script>

<img src="/uploads/posts/2011-11/1322308286_7699405_648291_015.jpg" width="200" class="zvzoom" align="center" />


Настройки



Картинки должны иметь класс class="zvzoom" Так же можно в самом скрипте
$('.zvzoom') заменить на $('#zvzoom') и это будет ID картинки (id="zvzoom")

Не забываем у самой картинке установить значение по-умолчанию. В данном случае:
width="200"

В данном случае
{width:"50%",height:"50%",left:"-25px",top:"-25px"}
уличение картинки будет на 50% от всех величины картинки. Так же можно заменить на px

Вторая строчка
{width:"230px",height:"325px",left:"0",top:"0"}
это размеры, которые картинка будет после увеличения. Можно убрать значения width и height тогда будут размеры исходной картинки.


Пример

Коментарии

Аватар
  • KEFIR
  • Группа: Гости
Спасибо большое автор!!!! С меня ящик горилки)))