Jquery onmouseover увеличение размера изображения

Question

Я пытаюсь создать эффект, когда при наведении курсора мыши на изображение оно увеличивается на 50% от его размера и возвращается назад, как только мышь выходит из своей области. Можно ли сделать это с помощью jquery? как? Можно ли сделать это без JQuery? как трудно было бы сделать это без jquery?

Answer 1

Вот, пожалуйста:

$('img').load(function() {
    $(this).data('height', this.height);
}).bind('mouseenter mouseleave', function(e) {
    $(this).stop().animate({
        height: $(this).data('height') * (e.type === 'mouseenter' ? 1.5 : 1)
    });
});

Живая демоверсия: http://jsfiddle.net/simevidas/fwUMx/5/

Answer 2

Вы можете сделать это, используя чистый CSS.Вот запущенный пример .

С учетом этого HTML:

<img class="foo" src="/img/logo.png">

Добавьте этот CSS:

body { background-color: black }
.foo {
    height:25px;
}
.foo:hover {
    height:50px;
}

Используйте jQuery, если один из вашихцелевой браузер не поддерживает приличный CSS, но я протестировал в IE8, и он поддерживает это.

Answer 3

Это можно сделать с помощью jQuery, который является JavaScript библиотекой и так далее: вы также можете использовать простой JavaScript.

JQuery:

var $image = $('#imageID'), //Or some other selector
    imgWidth = $image.width(),
    imgHeight = $image.height();
$('#imageID').hover(function() {
  //The mouseover 
  $(this).width( imgWidth * 2);
  $(this).height( imgHeight * 2);      
}, function() {
  $(this).width( imgWidth );
  $(this).height( imgHeight );
});

Простой JavaScript:
Смотрите пример здесь: http://jsfiddle.net/axpVw/

var image = document.getElementById('imageID'),
    imageWidth = image.width,
    imageHeight = image.height;
image.onmouseover = function() {
  image.width = 2 * imageWidth;
  image.height = 2 * imageHeight;
}
image.onmouseout = function() {
  image.width = imageWidth;
  image.height = imageHeight;
}

Answer 4

Это простая задача в обоих направлениях.У меня есть для вас примеры с обоими способами:

1. Jquery : http://jsfiddle.net/G7yTU/

   $(document).ready(function(){      
   var ht= $("img").height(),      
   wd=$("img").width(),      
   mult=1.5; //change to the no. of times you want to increase your image 
         //size.
   $("img").on('mouseenter', function(){
   $(this).animate({height: ht*mult,
                    width: wd*mult}, 500);
   });
   $("img").on('mouseleave', function(){
   $(this).animate({height: ht,
                    width: wd}, 500);
   })
   });
   

2. CSS : http://jsfiddle.net/zahAB/1/

   img{
   -webkit-transition:all 0.5s;
   -moz-transition:all 0.5s;
   -ms-transition:all 0.5s;
   -o-transition:all 0.5s;
      }
   
   img:hover{
       width:150px;
       height:150px;
   } 
   

Если вам нужна помощь, пожалуйста, свяжитесь с нами.