Question

有没有办法，在悬停时使用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>

Answer 1

如果您的图像完全位于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。

Answer 2

使用.animate：

可以轻松完成增长和缩小操作

$("#imgId").click(function(){
  $(this).animate({ 
    width: newWidth,
    height: newHeight
  }, 3000 );
});

问题是如何在不更改页面布局的情况下执行此操作。一种方法是使用完全位于内容上的副本。另一种可能是将图像绝对定位在相对固定大小的div内 - 尽管IE可能存在问题。

这是一个现有的图书馆，似乎正在做你所要求的http://justinfarmer.com/?p=14

Answer 3

你可以将图像包装在div中（或者你认为合适的任何html元素，li等），并将溢出设置为隐藏。然后使用jQuery .animate 以任何你喜欢的方式增长div。

例如， html 可能是

<div class="grower">
  <img src="myimg.jpg" width="300" height="300" alt="my image">
</div>

然后您的 css 看起来像

.grower {width:250px;height:250px;overflow:hidden;position:relative;}

所以你的图像基本上是由div裁剪的，你可以在任何事件上增长，以使用 jQuery

显示图像的完整大小

$('.grower').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": "300px","left":"-25px"}, 200,'easeInQuint');
}).mouseout(function(){ 
  $(this).stop().animate({"width": "250px","left":"0px"}, 200,'easeInQuint');
});;

注意：您可能希望在js中添加额外的css，比如增加了对div的z-index，以便它可以在布局上增长等

Answer 4

希望根据此帖子和Fox's answer提供的相关问题发布我正在使用的简单解决方案。

使用<img>这样的结果：<img style="position: absolute;" class="resize" />

你可以做类似于下面的事情。它将采用图像的当前宽度+高度，在悬停（current * 3）时将其设置为3倍，然后在鼠标移出时将其恢复。

var current_h = null;
var current_w = null;

$('.resize').hover(
    function(){
        current_h = $(this, 'img')[0].height;
        current_w = $(this, 'img')[0].width;
        $(this).animate({width: (current_w * 3), height: (current_h * 3)}, 300);
    },
    function(){
        $(this).animate({width: current_w + 'px', height: current_h + 'px'}, 300);
    }
);

current_X变量是全局的，因此可以通过鼠标移动操作访问它们。

Answer 5

你能不能使用jQuery的animate来实现它？通过一些修补，它应该是一个快速。

Answer 6

如果你的意思是“不影响布局”，你需要更多地关注CSS而不是javascript。

javascript involoved已在此处发布了bean ...但为了确保您的布局不会被破坏，您需要从布局的流程中删除您的图片。

这可以通过绝对定位，并将其z-index设置为更大的值来完成。但是，这并不总是最干净的解决方案...所以我建议你在父DOM元素中使用“position：relative”，在图像的样式中使用“position：absolute”。

相对和绝对的相互作用非常有趣。你应该谷歌了。

欢呼，jrh

Answer 7

- HTML

<div class="container">
  <img id="yourImg" src="myimg.jpg">
</div>

- JS

$( ".container" ).toggle({ effect: "scale", persent: 80 });

- 更多信息
http://api.jqueryui.com/scale-effect/

有没有办法在使用Jquery悬停时增大/缩小图像？

7 个答案: