有没有办法,使用
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.