嘿,社区,我在框架中对图片进行居中处理,因此尽管图像大小,图像的中心仍位于框架的中心。 (框架固定)
$('.item-box').each(function () {
var fwidth = $('.gmask').width();
var iwidth = $('.gmask img').width();
var fheight = $('.gmask').height();
var iheight = $('.gmask img').height();
$('.gmask img').css('margin-left', Math.floor((fwidth - iwidth) / 2) - 3);
$('.gmask img').css('margin-top', Math.floor((fheight - iheight) / 2) - 3);
});
我想为我的每个“.item-box”做一个循环 谁能告诉我我做错了什么
*编辑
顺便说一句,我正在做 jquery 模板
<script id="resultTemplate" type="text/x-jquery-tmpl ">
{{for Product}}
<div class="item-box" id="{{if #index < 5 }}itemboxTeaser{{else}}itemboxRest{{/if}}{{:#index+1}}">
<div class="visual-gallery">
<div class="gmask">
<ul class="replaceClass">
<a href="/lejemaal/{{:Urlname}}/#/Lejemaal">
<img src="{{:PhysicalPathToFrontPhotoUseWebFront300Px}}" alt="">
</a>
</ul>
</div>
</div>
</div>
{{/for}}
</script>
最佳答案
我想 .gmask
和它的相关 img
是 $(this)
的 child (你的 .item-box
)
像这样尝试:
$('.item-box').each(function () {
var $gmask = $(this).find('.gmask');
var $gmaskImg = $gmask.find('img');
var fwidth = $gmask.width();
var iwidth = $gmaskImg.width();
var fheight = $gmask.height();
var iheight = $gmaskImg.height();
$gmaskImg.css('margin-left', Math.floor((fwidth - iwidth) / 2) - 3);
$gmaskImg.css('margin-top', Math.floor((fheight - iheight) / 2) - 3);
});
阅读 OP 评论后编辑
$(window).load(function(){
$('.item-box').find('.gmask').each(function () {
var $gmask = $(this);
var $gmaskImg = $gmask.find('img');
var fwidth = $gmask.width();
var iwidth = $gmaskImg.width();
var fheight = $gmask.height();
var iheight = $gmaskImg.height();
$gmaskImg.css('margin-left', Math.floor((fwidth - iwidth) / 2) - 3);
$gmaskImg.css('margin-top', Math.floor((fheight - iheight) / 2) - 3);
});
});
关于javascript - 尝试在某个类上执行每个功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12196752/