Question

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

事情是帖子是动态的，因为html是根据用户的内容生成的（因此在撰写文章之前没有我可以搞砸的HTML）。因此，我不能说这些图片是小，大，左右对齐，我无法预测它们的位置。更不用说我每次检测到图片时都必须动态生成徽标img标签，因为我无法预测帖子中的出现次数。

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

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

那么，有没有办法“跟踪”img的相对位置，以便将确切的位置应用到另一个并保持这种方式，无论浏览器是什么，即使在显示期间调整窗口大小？ / p>

这就是我尝试过（并且几乎可以工作）。

        $(".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
            });
        });

（可能不是您见过的最纯粹，最有效的代码，但请记住，我不是开发人员......）

Answer 1

你可以做的是，将主要的“img”放入“div”中。然后在该循环代码中，在每个div中创建新的“img”标记，并将其设置为“relative”并在代码中设置其位置。现在，您拥有代码的每个图像都会显示该徽标，并且它们会一起移动。

另一种方法可能是使用“画布”来做到这一点，尽管你可能不希望这样做。

自动在每张图片的顶部放置徽标

1 个答案: