Jquery onmouseover图像大小增加

我试图做一个效果，当鼠标hover在图像上时，它会变大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：

添加此CSS：

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

如果你的目标浏览器之一不支持体面的CSS，请使用jQuery，但我在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; } 

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