javascript - 如何使用 jQuery 在页面上的每个图像上放置一个 div？

Question

我想知道如何使用 jQuery 在页面上的每个图像元素上放置一个 div？我想把它放在你右击图片的地方，你只是右击一个 div，然后它会更难保存，而那些不懂 HTML 和东西的人将无法获取图像，因为他们甚至不知道“查看页面源代码”选项。有人可以帮忙吗？

提前致谢。

Answer 1

您可以使用绝对定位将新的 DIV 放在图像之上:

.hider {
    z-index: 1000;
    position: absolute;
}

和这段代码:

$('img').each(function() {
    var pos = $(this).position();
    $('<div/>', {title: this.alt})
        .addClass('hider')
        .css({
            width: this.width, height: this.height,
            left: pos.left, top: pos.top,
        })
        .insertAfter(this);
});

参见 http://jsfiddle.net/alnitak/KRgnK/用于工作演示

EDIT 已更新以将原始图像的 alt 标签复制到叠加 div 上。