3

ちょっとコミュニティは、フレーム内の写真のこのセンタリングを行っているので、そのサイズに関係なく、画像の中心がフレームの中心にあります。（枠は固定です）

 $('.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>
4

4 に答える 4

4

私は.gmaskそれが相対的であると思いimgます$(this)(あなたの.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);
    });
});
于 2012-08-30T12:24:55.090 に答える
0

imgはあなたが求めているものなので、.eachこれらの要素をループしてみませんか？

$('.item-box .gmask img').each(function ()
{
    var parent, fwidth,fheight,iwidth,iheight;
    parent = $(this);
    while(!parent.attr('class').match(/\bgmask\b/))
    {//get the .gmask parent of current img
        parent = parent.parent();
    }
    iwidth = $(this).width();
    iheight = $(this).height;
    fwidth = parent.width();
    fheight = parent.height();
    $(this).css('margin-left', Math.floor((fwidth - iwidth) / 2) - 3);
    $(this).css('margin-top', Math.floor((fheight - iheight) / 2) - 3);
});

これにより、使用するセレクターの量が減り、全体的なパフォーマンスが向上します。私見ですが、読みやすく、保守も簡単です。

于 2012-08-30T12:35:03.710 に答える
0

各 .item-box 内の画像を中央に配置したいので、「this」を参照する必要があると思います。

 $('.item-box').each(function () {
    var fwidth = $(this).find('.gmask').width();
    var iwidth = $(this).find('.gmask img').width();
    var fheight = $(this).find('.gmask').height();
    var iheight = $(this).find('.gmask img').height();

    $(this).find('.gmask img').css('margin-left', Math.floor((fwidth - iwidth) / 2) - 3);
    $(this).find('.gmask img').css('margin-top', Math.floor((fheight - iheight) / 2) - 3);
});
于 2012-08-30T12:25:05.853 に答える
0

これらの行は、現在の .item-box に関係なく、ページの最初の要素を取得しています:

var fwidth = $('.gmask').width();
var iwidth = $('.gmask img').width();
var fheight = $('.gmask').height();
var iheight = $('.gmask img').height();

あなたがする必要があります$(this).find('.element');

于 2012-08-30T12:26:15.307 に答える