%20(2).svg)
项目简介
本项目是一款简易的 JavaScript 水印管理插件，名为 X-Watermark。它能够为网页内容添加水印，通过简单配置就能在网页任意位置展示水印效果，有效保护网页内容版权。
项目的主要特性和功能
- 位置灵活：可将水印挂载到任意 DOM 节点，实现网页任意位置显示。
- 自适应调整：水印会依据内容长度与容器宽度自动调整，保证完整显示。
- 自动换行：当水印内容超出容器宽度时，自动进行换行。
- DOM 监听：能监听 DOM 变化，指定 DOM 改变时自动更新水印。
- 防删除机制：若水印被删除，会自动重新添加。
- 多样样式：支持平铺、横向、纵向、错位铺等多种水印样式。
- 高度定制：水印的样式、颜色、透明度等均可按需定制。
- TypeScript 支持：提供完整类型定义，可用于 TypeScript 项目。
安装使用步骤
通过 CDN 引入
- 在 HTML 文件里添加
<script>标签引入 X-Watermark 的 CDN 链接。 ```html
或者html
2. 创建水印实例并初始化。javascript
const watermark = new XWatermark.XWatermark('Watermark Text', { parentSelector: '#container' });
或者通过 `init` 方法手动初始化：javascript
const watermark = new XWatermark.XWatermark();
watermark.init('Watermark Text', { parentSelector: '#container' });
```
通过 npm 安装
- 使用 npm 安装 X-Watermark。
shell npm install @xpyjs/watermark --save - 在 JavaScript 文件中引入 X-Watermark。
javascript import XWatermark from '@xpyjs/watermark'; - 创建水印实例并应用。
javascript const watermark = new XWatermark(); watermark.init('Watermark Text', { parentSelector: '#container' });还能按需配置其他选项，如防止删除、监听大小变化等。详细配置选项请参考项目文档。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】