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

【问题标题】：Is there a way to grow/shrink an image on hover using Jquery?有没有办法使用 Jquery 在悬停时放大/缩小图像？
【发布时间】：2010-10-27 08:59:53
【问题描述】：

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

【问题讨论】：

标签： jquery

【解决方案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。

【讨论】：

您忘记加引号了。这应该是“宽度”和“400px”等等。

【解决方案2】：

使用.animate 可以轻松进行增长和收缩操作：

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

问题是如何在不改变页面布局的情况下做到这一点。一种方法是使用绝对位于内容上方的副本。另一个可能是将图像绝对定位在相对固定大小的 div 中 - 尽管 IE 可能会遇到问题。

这是一个现有的库，似乎可以满足您的要求 http://justinfarmer.com/?p=14

【讨论】：

【解决方案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 以便它可以在布局上增长等

【讨论】：

这很接近，但它会裁剪图像而不是调整图像大小。

【解决方案4】：

想根据这篇文章和来自Fox's answer 的信息发布一个我正在使用的简单解决方案到一个相关问题。

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

您可以执行类似于以下内容的操作。它将采用图像的当前宽度+高度，在悬停时将其放大 3 倍 (current * 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 变量是全局变量，因此可以在鼠标移出操作中访问它们。

【讨论】：

虽然这只是一个简单的方法。如果用户在图像上快速前后移动鼠标，图像将继续扩大。您需要在 mouseout 上完全重置尺寸。

【解决方案5】：

你不能使用 jQuery 的animate 来实现它吗？稍加修改，应该很快。

【讨论】：

【解决方案6】：

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

所涉及的 javascript 已在此处发布...但为确保您的布局不被破坏，您需要从布局的流程中删除您的图像。

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

相对和绝对的相互作用非常有趣。你应该用谷歌搜索一下。

干杯，jrh

【讨论】：

【解决方案7】：

-- HTML

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

-- JS

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

【讨论】：