Question

我有以下标记：

<a href="#"><img src="sample-article-img.jpg" alt="Mri Machine" title="medical" class="alignright size-medium wp-image-3109"></a>

我需要将其与另一张图片（放大按钮）重叠：images/article-zoom.png

问题＃1，我无法更改标记。问题＃1，我在<a>

上没有课程或ID

我的想法是完全使用jquery，在第一个图像（客户端）旁边放置zoom.png将位置置于绝对位置。但问题是主图像会浮动，所以我的放大按钮不会随之移动。

有什么想法吗？

Answer 1

你真的没有给出很多细节，但作为首发添加新图像是相当直接的。

对于demo，我们假设我们正在添加任何以wp-image开头的类的图像。如果仅添加到特定图像，则需要有关该图像的更多详细信息，和/或其父元素

还需要有关定义与现有图像相关的位置的更多细节。我假设现有图像的中心。

/* adjust accordingly*/
var buttonW = 120,/* button width*/
    buttonH = 40, /* button height*/
    $button = $('<img>', {src:  'drop zoom.png'});

var $image = $('img[class ^= "wp-image"]'),
    $image_link = $image.parent().css('position ', 'relative ');

var currImgPosition = $image.position(),
    currImgH = $image.height(),
    currImgW = $image.width();

var buttonCss = {
    position: 'absolute',
    zIndex : 10,
    width: buttonW,
    height: buttonH,
    top: currImgPosition.top + currImgH / 2 - buttonH / 2,
    left: currImgPosition.left + currImgW / 2 - buttonW / 2
}

$image_link.append( $button.css(buttonCss) );

编辑：jsfiddle.net中的一些实时html，有足够的css模仿现有元素也有帮助

使用jquery（wordpress）使用另一个图像覆盖图像

1 个答案: