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

這是可能使用jQuery，這是一個的JavaScript庫等alors要做到這一點：你也可以使用普通的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 3

您可以使用純CSS做到這一點。這是一個running sample。

鑑於這種HTML：

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

添加這個CSS：

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

使用jQuery，如果你的目標瀏覽器的一個不支持CSS體面，但我在IE8測試，它支持這個。

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

如果您需要任何幫助，請聯繫。