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をホバ​​ーするまで非表示になっimgている があり、img がある場所に配置され、同じ画像が大きく表示されます。画像は中心から増加し、構造体の残りの部分には影響しませんabsolute。

ご要望があればアニメーションを追加します。

于 2012-04-13T13:52:18.087 に答える
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 に答える
0

position:absolute移動したくない要素のcssを試してください

一番上にz-index表示したい要素を高くする

于 2012-04-13T13:40:37.533 に答える