0

我有以下标记：

<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，我没有课程或 id<a>

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

有任何想法吗？

4

1 回答 1

0

您确实没有提供很多细节可以使用，但是作为初学者添加新图像是相当简单的。

对于演示，假设我们要添加到任何以 . 开头的类的图像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 中的一些具有足够 css 来模仿现有元素的实时 html 也会有所帮助

于 2013-01-19T21:15:02.327 回答