1

次のように表示される画像のリストがあります。

<div id="imgContainer">
    <ul id="thumbs">
        <li class="trns">
            <a class="magnify" href='/uploads/{{ item.pic1 }}' target="_blank"><img class="thumb" src='/uploads/{{ item.pic1 }}'/></a>
        </li>
        <li class="trns">
            <a class="magnify" href='/uploads/{{ item.pic2 }}' target="_blank"><img class="thumb" src='/uploads/{{ item.pic2 }}'/></a>
        </li>
        <li class="trns">
            <a class="magnify" href='/uploads/{{ item.pic3}}' target="_blank"><img class="thumb" src='/uploads/{{ item.pic3 }}'/></a>
        </li>
    </ul>
</div>

上と左のマイナス値をそれぞれ高さと幅の半分に動的に割り当てて、親指に画像のちょうど真ん中が含まれるようにしたい

このようなもの（もちろん動作しません）

$("#imgContainer").find("img.thumb").css({"top":"-"+this.height/2,"left":"-"+this.width/2"});

どうやってやるの？

ありがとう

4

3 に答える 3

0

topleftプロパティは配置された要素にのみ影響を与える可能性があるため、画像の位置は（relativeまたは配置された親absoluteの内部に）ある必要があります。relative

とにかく、すべてのサムネイルが同じ（既知の）サイズである場合はclip()、cssを使用した場合にのみ使用できます

あなたのコードについて、あなたは書くべきです

$("#imgContainer").find("img.thumb").css({
   top : "-"+this.height/2 + 'px' , // note (+'px')
   left: "-"+this.width/2 + 'px' 
});
于 2012-05-20T17:39:40.923 に答える
0

私はこれを使用することになった、それは動作します

$("#imgContainer").find("img.thumb").each(function(){
    var mtop = $(this).height()/2*-1;
    var mleft = $(this).width()/2*-1;
    $(this).css({"top":mtop,"left":mleft});
});

後で編集: すべてのブラウザーで動作します。いくつかの ajax が実行されていて、少し混乱しました

于 2012-05-21T14:58:33.997 に答える
0

これを試して：

$("#imgContainer ul li a img").css({
    top  : "-" + this.height/2,
    left : "-" + this.width/2
});
于 2012-05-21T14:59:02.543 に答える