有没有一种方法可以使用Jquery在鼠标悬停时增大/缩小图像? [英] Is there a way to grow/shrink an image on hover using Jquery?
问题描述
有没有一种方法，使用Jquery在悬停时先放大然后缩小图像(带有动画，使其看起来很平滑)，而又不会影响布局(我假设填充必须先缩小然后增大)
Is there a way, using Jquery to grow and then shrink an image (with animation so it looks smooth) on hovering without affecting the layout too much (I'm assuming the padding would have to shrink and then grow as well).
经过一番混乱，我终于提出了解决方案，这要归功于所有人的帮助.
With a bit of messing around, I finally came up with the solution, thanks to everyone who helped out.
<html>
<head>
<style type="text/css">
.growImage {position:relative;width:80%;left:15px;top:15px}
.growDiv { left: 100px; top: 100px;width:150px;height:150px;position:relative }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div class="growDiv">
<img class="growImage" src="image.jpg" alt="my image">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.growImage').mouseover(function(){
//moving the div left a bit is completely optional
//but should have the effect of growing the image from the middle.
$(this).stop().animate({"width": "100%","left":"0px","top":"0px"}, 400,'swing');
}).mouseout(function(){
$(this).stop().animate({"width": "80%","left":"15px","top":"15px"}, 200,'swing');
});;
});
</script>
</body></html>
推荐答案
如果您的图像绝对位于CSS文档中，则在为图像设置动画时，页面布局的其余部分不应更改.
If you have your image positioned absolutely to the document in CSS, the rest of the page layout should not change when you animate your image.
您应该能够使用jQuery的animate()函数.代码看起来像这样:
You should be able to use jQuery's animate() function. The code would look something like this:
$("#yourImage").hover(
function(){$(this).animate({width: "400px", height:"400px"}, 1000);},
function(){$(this).animate({width: "200px", height:"200px"}, 1000);}
);
此示例将将id = yourImage的图像在鼠标悬停时增大到400px宽和高，并在悬停结束时将其恢复到200px宽和高.也就是说，您的问题更多的是HTML/CSS，而不是jQuery.
This example would grow the image with id=yourImage to 400px wide and tall when moused over, and bring it back to 200px wide and tall when the hover ends. That said, your issue lies more in HTML/CSS than it does jQuery.
这篇关于有没有一种方法可以使用Jquery在鼠标悬停时增大/缩小图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
