5

我有一组动态生成的图像（每个图像附近都有评论）。我想以 48 像素的最大宽度和最大高度显示每个图像，但是当用户将鼠标悬停在图像上时，它会增长到 200 像素的最大宽度和最大高度。但无需移动页面上的其他所有内容。这是生成图像的代码：

$(function(){
        $.getJSON("inc/API.php", 
        {command : "getUserComments", userid : getQueryStringValue("userid")},
        function(result)
        {
        for (var i = 0; i<6; i++){
            $("#divUserCommentsContent").append("<div id='divUserComment'><div id='divCommentTime'>"+
            result[i].commentDateAndTime+"</div><div id='divUserDetail'><div id='divUserpic'>
       **<img src='images/"+result[i].imageFileName+"' class='commentpic' />**</div>
            <div id='divUsername'>Comment for <a href='rank.html?imageID="+result[i].imageID+
            "&imageFileName="+result[i].imageFileName+"'>"+result[i].imageHeader+
            "</a></div></div><div id='divCommentText'>"+result[i].comment+"</div></div>");
        }
    });
});

我用 2 ** 标记了图像。这是CSS：

.userpic, .commentpic
{
max-height:48px;
max-width:48px;
border-radius:5px;
z-index:1;
position:relative;
}
.commentpic:hover
{
max-width: 200px;
max-height: 200px;
position:relative;
z-index: 50;
}

它会放大图像，但也会移动图像右侧和图像下方的所有其他内容。

如何在不移动其他所有内容的情况下使用 CSS（最好）或使用 jQuery 使图像更大？谢谢！

4

6 回答 6

4

您可以尝试将 .commentpic 的位置设置为绝对位置。

你可以在这里看到一个例子：http: //jsfiddle.net/HkPCp/3/

我认为这是您想要的行为，对吗？

编辑：我更新了 jsFiddle，这样它就不会移动其他元素。

这是正确的行为吗？

于 2012-04-13T13:49:29.443 回答
1

将您的每个图像放入具有设定宽度和高度的容器中。您的容器的溢出将是可见的。

任何流出的东西都是可见的，但不会影响内容。

http://jsfiddle.net/ck6MG/

于 2012-04-13T13:52:14.033 回答
1

它会在这里使用 jQuery：

<div id="enlarge_img"></div>

<style type="text/css">
   div#enlarge_img {
       display: none;
       height: 200px;
       line-height: 200px;
       position: absolute;
       text-align: center;
       width: 200px;
   }

   div#enlarge_img > img {
       max-height: 200px;
       max-width: 200px;
   }
</style>

<script type="text/javascript">
$(function() {
    $('body img').bind('mouseover', function() {
        var offset = $(this).offset();

        $('div#enlarge_img').show().css({
            'left' : offset.left - ((200 - $(this).width()) / 2),
            'top' : offset.top- ((200 - $(this).height()) / 2),
        }).html('<img src="'+$(this).attr('src')+'" />');
    });

    $('div#enlarge_img > img').live('mouseout', function() {
        $('div#enlarge_img').hide();
    });
});
</script>

基本上你有一个absolute div隐藏，直到你悬停 a img，然后将自己定位到 img 所在的位置并显示相同的图像，但更大。图像从中心增加，不会影响结构的其余部分，因为它是absolute.

如果你愿意，我可以添加动画。

于 2012-04-13T13:52:18.087 回答
1

https://jsfiddle.net/dafemtg1/

仅供参考，CSS 使用 transform 属性：

img{transition:all 0.2s;}
img:hover {transform:scale(1.4);transition:all 0.2s;}
于 2018-01-04T06:38:47.557 回答
0

position:absolute对不想移动的元素尝试 css

z-index为您想要显示在顶部的元素设置高位

于 2012-04-13T13:40:37.533 回答
0

将 class="userpic-container" 添加到图像的父 div 并尝试以下 CSS：

.userpic-container {
    position: relative;
    height: 48px;
    width: 48px;
}

.userpic, .commentpic {
    border-radius: 5px;
    position: absolute;
    height: 48px;
    width: 48px;
    z-index: 1;
}
.commentpic:hover {
    height: 200px;
    width: 200px;
    z-index: 10;
}
于 2012-04-13T14:08:22.873 回答