jquery - 使用 jquery css top 和 left 动态分配图像缩略图

Question

我有一个这样显示的图像列表:

<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>

我想分别为高度和宽度的一半动态分配负值 top 和 left 值，这样我的拇指将恰好包含图像的中间

像这样的(当然不行)

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

我该怎么做？

谢谢

---

Answer 1

top 和 left 属性只能影响定位元素，因此图像的位置应该是relative(或absolute 在 relative 定位的父级中)。

无论如何，如果所有缩略图都具有相同(已知)大小，您可以使用 clip()仅使用 css

关于你的代码，你应该写

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