Javascript Jquery onmouseover 图像大小增加

Jquery onmouseover image size increase

提问by Vish

I am trying to do an effect where when the mouse hovers over an image the it grows large by 50% of its size and goes back as soon as the mouse moves out of its region. Can it be possible to do this with jquery? how? could it be possible to do this without jquery? how hard would it be to do it without jquery?

我试图做一个效果，当鼠标悬停在图像上时，它会变大其大小的 50%，并在鼠标移出其区域后立即返回。可以用 jquery 做到这一点吗？如何？没有jquery可以做到这一点吗？没有 jquery 做这件事有多难？

回答by ?ime Vidas

Here you go:

干得好：

$('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)
    });
});

Live demo:http://jsfiddle.net/simevidas/fwUMx/5/

现场演示：http : //jsfiddle.net/simevidas/fwUMx/5/

回答by JoshRivers

You can do this by using pure CSS. Here is a running sample.

您可以使用纯 CSS 来做到这一点。这是一个运行示例。

Given this HTML:

鉴于此 HTML：

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

Add this CSS:

添加这个CSS：

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

Use jQuery if one of your target browser doesn't support decent CSS, but I tested in IE8, and it supports this.

如果您的目标浏览器之一不支持体面的 CSS，请使用 jQuery，但我在 IE8 中进行了测试，它支持这一点。

回答by dianovich

It is possible to do this with jQuery, which is a JavaScriptlibrary, et alors: you can also use plain JavaScript.

可以使用 jQuery（一个JavaScript库）来做到这一点，等等：您也可以使用纯 JavaScript。

jQuery:

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 );
});

Plain JavaScript:
See Example here: http://jsfiddle.net/axpVw/

纯 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;
}

回答by Mayank Tripathi

It is a easy task in both the ways. I have fiddles for you with an example in both the ways:

这两种方式都很容易。我为您提供了两种方式的示例：

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;
   } 
   

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;
   } 
   

If you need any help, please contact.

如果您需要任何帮助，请联系。