1

我目前在一个网站上工作，我希望当用户将鼠标悬停在图像上时，图像的高度和宽度会增加。

这是我来自http://jsfiddle.net/amoeba/KdwwL/的代码，用于所需的输出。

HTML：

<img id="img-shadow" align="center" src="https://i2.sndcdn.com/artworks-000049446949-mwzm8s-t500x500.jpg?9d68d37" />

CSS：

#img-shadow {
    height:550px;
    width:550px;
    left:50px;
    top:50px;
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    box-shadow:1px 1px 10px black;
}

jQuery：

$(document).ready(function() {
    $('#img-shadow').hover(function() {
        $(this).stop().animate({
            'width: '565px',
            'height' : '565px',
            'left' : '45px',
            'top' : '45px'
        }, 300);
    }, function() {
        $(this).stop().animate({
            'width' : '550px',
            'height' : '550px',
            'left' : '50px',
            'top' : '50px'
        }, 360);
    });
});

这是我想要的确切效果，但问题是当我将鼠标悬停在图像上时，它会影响页面的其余内容，如下例所示：http: //jsfiddle.net/amoeba/Vwxev/

如何在不移动动画图像下方的内容的情况下获得相同的效果？

**注意：在第二个示例中，我position:absolute删除了该属性。在我的网页上，如果我有，它似乎会向外扩展text-align:center。我text-align:center删除了该属性，因为 jsfiddle 不会为我居中，我只想展示当我不想要它时它如何向下移动内容。

4

2 回答 2

0

答案 1

这是使用绝对定位属性。

我几乎可以肯定这就是你想要的。在这个jsfiddle 中，我添加了绝对位置属性，以便文本不会移动。如果您希望动画生效时图像位于顶部，您可以编辑 z-index。

我将您的图像包装在#imgdiv 中，将您的文本包装在#otherdiv 中并应用此css：

#imgdiv {
 position: absolute;
 top: 0;
 left: 0;
}

#otherdiv {
 position: absolute;
 top: 550px;
 left: 0;
}

答案 2

这使用了相同大小的图像大小差异的负边距效果。

在这里，我只是将这些代码行分别添加到悬停和悬停功能中。

悬停在：

$('#text').stop().animate({
    'margin-top': '-15px'
}, 300);

悬停：

 $('#text').stop().animate({
    'margin-top': '0px'
}, 360);

我几乎忘记了新的jsfiddle。

于 2013-06-02T01:09:18.353 回答
-1

这可能不起作用，我无法测试它，因为我的计算机出于某种原因讨厌 jQuery，但尝试使用它：

$(document).ready(function() {
    $('#img-shadow').hover(function() {
        $('#img-shadow').stop().animate({
            'width: '565px',
            'height' : '565px',
            'left' : '45px',
            'top' : '45px'
        }, 300);
    }, function() {
        $('#img-shadow').stop().animate({
            'width' : '550px',
            'height' : '550px',
            'left' : '50px',
            'top' : '50px'
        }, 360);
    });
});

抱歉，如果这不起作用。

于 2013-06-02T01:01:55.980 回答