是否有一种使用jQuery在悬停时使图像以动画方式平滑地增大和缩小,而不会对布局产生太大影响(我假设填充也必须收缩然后再增长)。
经过一些摸索,我终于想出了解决方案,感谢所有帮助过我的人。
<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>