有没有办法,使用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>
Ste*_*man 14
如果您的图像完全位于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.
增长和收缩操作很容易.animate:
$("#imgId").click(function(){
$(this).animate({
width: newWidth,
height: newHeight
}, 3000 );
});
问题是如何在不改变页面布局的情况下执行此操作.一种方法是使用完全位于内容上的副本.另一种可能是将图像绝对定位在相对固定大小的div内 - 尽管IE可能存在问题.
这是一个现有的库,似乎做你要求的http://justinfarmer.com/?p=14