1

我有一个 wordpress 网站，我想在任何帖子的任何图片的右下角放置相同的小 png 图标。

问题是帖子是动态的，因为 html 是根据用户的内容生成的（所以在写文章之前没有我可以弄乱的 html）。正因为如此，我不能说图片是小是大，是左对齐还是右对齐，我也无法预测它们的位置。更不用说每次检测到图片时我还必须动态生成徽标 img 标签，因为我无法预测帖子中出现的次数。

我相信要走的路是定位帖子中的任何“img”标签，并在其后附加一个标志 img 标签，这很容易实现。但我发现检测用户图片位置以便将其应用于徽标的唯一方法是使用“clientWidth”和“clientHeight”。

它可以工作，但在 clientWidth 方面存在严重缺陷：由于它是与窗口相关的绝对定位，根据我使用的浏览器，我得到不同的偏移结果（我相信这是因为每个浏览器管理其滚动条的方式或某物..）。无论如何，这是一个死胡同。

那么，有没有办法“跟踪”一个 img 的相对位置，以便将确切的位置应用于另一个 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 回答