使用JavaScript为图片添加水印效果

"这篇文章主要介绍了如何使用JavaScript来实现在图片上添加水印效果。通过创建层（Layer）并在页面加载时动态定位，可以将水印文本或图片覆盖在指定图片上。" 在JavaScript中，为图片添加水印效果通常涉及到以下几个关键知识点： 1. **获取元素位置**： `getDim` 函数用于获取图片元素的绝对位置。它通过遍历元素及其所有父元素的偏移属性（offsetLeft 和 offsetTop），累加得到元素相对于文档左上角的坐标。这对于定位水印层至关重要。 2. **创建层（Layer）**： `createLayer` 函数是核心功能，它首先调用 `getDim` 函数获取图片的位置信息，然后使用 `document.writeln` 动态插入HTML代码，创建一个绝对定位的 `<div>` 元素作为水印层。这个层的 `left` 和 `top` 属性设置为图片的位置，`z-index` 设置为1以确保它覆盖在图片之上。 3. **水印内容**： 在创建的 Layer1 `<div>` 中，你可以放置任何你想作为水印的文本或图片。在这个例子中，文本 "ˮӡ" 作为水印内容被写入。 4. **窗口大小改变处理**： 当浏览器窗口大小改变时，`window.onresize` 事件会触发 `location.reload()`，页面将重新加载，以确保水印层始终与图片位置匹配。这种方式简单直接，但可能导致页面闪烁或性能问题，特别是在频繁调整窗口大小时。 5. **CSS引用**： `<link>` 标签引入了名为 "j.css" 的外部样式表，可能包含对水印层的样式定义，如字体、颜色、透明度等。虽然在示例中没有详细展示，但这是调整水印视觉效果的关键。 6. **HTML结构**： 示例中的 HTML 结构包含多张图片，并为每张图片调用 `createLayer` 函数，这意味着可以为页面上的多张图片添加水印。`<span>` 元素用来包裹图片，以便于获取它们的位置信息。 使用JavaScript实现图片水印效果主要涉及元素位置获取、动态HTML创建、事件监听以及可能的CSS样式应用。此方法适用于静态网页，但对于响应式设计或高性能场景，可能需要更复杂的方法，例如使用Canvas绘制水印，或者使用现代Web技术如SVG和CSS3的伪元素来实现。