1

私はワードプレスのウェブサイトを持っており、同じ小さな png アイコンを投稿の画像の右下隅に配置したいと考えています。

問題は、ユーザーのコンテンツに応じて HTML が生成されるため、投稿が動的であるということです (そのため、記事を書く前にいじることができる HTML はありません)。このため、写真が小さいか大きいか、左または右に整列するかどうかはわかりません。また、それらの位置を予測することもできません。言うまでもなく、投稿内の出現数を予測できないため、画像が検出されるたびにロゴ img タグを動的に生成する必要もあります。

投稿内の「img」タグをターゲットにして、その直後にロゴ img タグを追加すると、簡単に達成できると思います。しかし、ロゴに適用するためにユーザーの写真の位置を検出する唯一の方法は、「c​​lientWidth」と「clientHeight」を使用することです。

それは機能しますが、clientWidth に関しては重大な欠陥があります。これはウィンドウに関連する絶対的な配置であるため、使用するブラウザーに応じて異なるオフセット結果が得られます (各ブラウザーがスクロールバーを管理する方法またはなにか..）。とにかく、このままでは行き止まりです。

したがって、表示中にウィンドウのサイズが変更された場合でも、正確な位置を別の位置に適用し、その方法を維持するために img の相対位置を「追跡」する方法はありますか?

これは私が試したものです（そしてほとんどうまくいきました）。

        $(".status-publish img").each(function(index)
        {
            var theID= 'theID'+index;
            $(this).attr('id', theID);
            $(this).after('<img id="log'+index+'" src="logo.png" /> ');

            var source  = $('#theID'+index);
            var sourceHeight = source.height()-22;
            var sourcePosition = source.position();
            var target   = $('#log'+index);

            var sourceClass=source.attr('class');
            var mysplit=sourceClass.split(" ");
            var first_part=mysplit[0];
            var last_part= mysplit.pop();

            if((first_part=="alignleft") || (last_part=="alignleft") )
            {
                var x      = sourcePosition.left-2;
                var y      = sourcePosition.top + sourceHeight;
            }
            else if((first_part=="alignright") || (last_part=="alignright") )
            {
                var x      = sourcePosition.left+10;
                var y      = sourcePosition.top + sourceHeight;
            }

            else if((first_part=="aligncenter") || (last_part=="aligncenter") )
            {
                var x      = sourcePosition.left-2;
                var y      = sourcePosition.top + sourceHeight+2;
            }

            else if((first_part=="alignnone") || (last_part=="alignnone") )
            {
                var x      = sourcePosition.left-2;
                var y      = sourcePosition.top + sourceHeight;
            }

            x -= (target.outerWidth() - source.outerWidth());

            target.css({
                position: 'absolute',
                zIndex:   5000,
                top:      y, 
                left:     x
            });
        });

(おそらく、これまでに見た中で最も純粋で効果的なコードではありませんが、私は開発者ではないことに注意してください...)

4

1 に答える 1

1

あなたができることは、メインの「img」を「div」に入れることです。次に、そのループ コードで、すべての div に新しい「img」タグを作成し、その位置を「相対」に設定し、コードで行われるようにその位置を設定します。これで、コードを持つすべての画像にそのロゴが表示され、一緒に動きます。

別のアプローチとして、「キャンバス」を使用してこれを行うこともできますが、おそらくこの方法は望ましくありません。

于 2012-10-29T07:06:22.033 に答える