代码之家 › 专栏 › 技术社区 › Kris Erickson

是否有一种方法可以使用jquery在悬停时增大/缩小图像?

jquery

Kris Erickson · 技术社区 · 16 年前

有没有一种方法,可以使用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 回复 | 直到 6 年前

David Ogutu Steve Goodman 6 年前

如果您的图像完全定位在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宽和高。也就是说,与jquery相比,您的问题更多地在于HTML/CSS。

Keith 16 年前

增长和收缩操作很容易 .animate :

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

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

这是一个现有的图书馆,似乎可以满足你的要求 http://justinfarmer.com/?p=14

Ralph Cowling 15 年前

您可以将图像包装在一个DIV(或者您认为合适的HTML元素,li等)中,其溢出设置为hidden。然后使用jQuery 动画以你喜欢的任何方式发展这个部门。

例如, 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索引,这样它就可以在布局中增长等等。

Community CDub 8 年前

想要发布一个简单的解决方案,我正在使用基于此文章和来自 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 变量是全局的,因此可以在鼠标悬停操作中访问它们。

karim79 16 年前

你不能用jquery吗 animate 要实现这一点?稍微修补一下,就可以了。

jrharshath 16 年前

如果您真正的意思是“不影响布局”,那么您需要更多地关注CSS而不是JavaScript。

javascriptinvorared已经在这里发布了bean…但是为了确保你的布局不会被破坏,你需要 从布局流中删除图像。

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

相对和绝对的相互作用是相当有趣的。你应该用谷歌搜索。

欢呼

Pinny 11 年前

——HTML

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

——JS

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