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

top和left属性只能影响定位元素，因此图像的位置应该是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 回答