有没有办法使用Jquery在悬停上增长/缩小图像?

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

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...