有没有办法,使用
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>
解决方法
如果您的图像绝对位于CSS中的文档,则当您为图像设置动画时,页面布局的其余部分不应更改.
你应该可以使用jQuery的animate()函数.代码看起来像这样：
$("#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.
