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来完成此操作。这是running sample。

鉴于此HTML：

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

添加此CSS：

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

如果您的某个目标浏览器不支持正常的CSS，请使用jQuery，但我在IE8中进行了测试，并支持此功能。

Answer 3

可以使用jQuery执行此操作，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

这两种方式都很容易。我在两种方式都有一个例子：

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

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

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

Jquery onmouseover图像大小增加

4 个答案: