logo标签列表

有没有一种使用Jquery在鼠标悬停时调整图片大小的方法？

jquery
10

是否有一种使用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>
7个回答
17
如果你在CSS中将图像绝对定位到文档中，当你使用动画效果时，页面布局的其余部分不应更改。您可以使用jQuery的animate（）函数。代码应如下所示：
$("#yourImage").hover(
    function(){$(this).animate({width: "400px", height:"400px"}, 1000);},        
    function(){$(this).animate({width: "200px", height:"200px"}, 1000);}
);

当鼠标悬停在ID为yourImage的图片上时，此示例将使其增长到400像素宽和高，并在悬停结束时将其恢复为200像素宽和高。话虽如此，您的问题更多地与HTML/CSS有关，而不是jQuery。

1
你忘记加引号了。这应该是 "width" 和 "400px" 等等。 - Ali Bahrami
9

使用 .animate 轻松进行增大和缩小操作:

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

问题是如何在不改变页面布局的情况下实现这一点。一种方法是使用绝对定位在内容上方放置副本。另一种可能是在相对固定大小的div内绝对定位图像-尽管IE可能会有问题。
这里有一个现有的库，似乎可以做到你所要求的http://justinfarmer.com/?p=14。
4
你可以将图片放在一个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，例如将z-index增加到您的div中，以便它可以覆盖布局等。
这很接近了，但它裁剪了图像而不是调整大小。 - Kris Erickson
3

我想分享一个简单的解决方案，基于这篇文章和Fox的答案提供的相关问题信息。

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

你可以做类似下面的事情。它将获取图片当前的宽度和高度，将其在悬停时放大三倍（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 上完全重置尺寸。 - Navigatron
1

-- HTML

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

-- JS

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

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

1

你不能使用jQuery的animate来实现吗？稍微调整一下，应该很容易。

1
如果你真的意思是“不影响布局”，那么你需要更加关注 CSS 而不是 JavaScript。
这里已经发布了涉及的 JavaScript... 但为了确保您的布局不会被破坏，您需要从布局中删除图像。
这可以通过将其定位绝对并将其 z-index 设置为较大的值来完成。然而，这不总是最清洁的解决方案... 所以我建议您在父 DOM 元素中玩弄 "position:relative"，并在图像样式中使用 "position:absolute"。
相对和绝对之间的相互作用非常有趣。你应该去 Google 一下。
干杯，jrh
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接