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>

我想动态地将减去顶部和左侧的值分别分配给高度和宽度的一半，这样我的拇指就会包含图像的中间位置

像这样的东西（当然它不起作用）

$("#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' 
});

Answer 2

我最终使用它，它的工作原理

$("#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正在进行，它让我有点困惑

Answer 3

试试这个：

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

动态分配jquery css顶部和左侧的图像拇指

3 个答案: