我有一个这样显示的图像列表:
<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"});
我该怎么做?
谢谢
最佳答案
top
和 left
属性只能影响定位元素,因此图像的位置应该是relative
(或absolute
在 relative
定位的父级中)。
无论如何,如果所有缩略图都具有相同(已知)大小,您可以使用 clip()
仅使用 css
关于你的代码,你应该写
$("#imgContainer").find("img.thumb").css({
top : "-"+this.height/2 + 'px' , // note (+'px')
left: "-"+this.width/2 + 'px'
});
关于jquery - 使用 jquery css top 和 left 动态分配图像缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10675641/