css 水印_tp-watermark.js网页添加水印插件

tp-watermark.js网页添加水印插件

作者：鹏仔先生

上周五，出差去改上个前端遗留的小问题，用到了watermark.js这个网站添加水印插件，功能很简单，就是给网页添加个水印，我看了下网上，有很多种，基本都是Canvas实现，我想要的是行与行之间交错效果，可是没有找到对应文档，看的烦的...

那就自己简单写个网页添加水印插件吧， tp-watermark.js

身为初级前端，写法比较low，但是功能很完善，请大家多多指导

下载插件：https://qzhan.lanzous.com/iP9effhq7af

DEMO下载：https://qzhan.lanzous.com/i7le1fhq7lg

下载完引入插件

使用水印

RemoveTpWatermark();

删除水印

RemoveTpWatermark();

很方便使用，一列显示几行，一行显示几列都是计算的，大家不用自己定义(具体需要的参数已添加注释)。

// 添加水印方法function TpWatermark(CON,H,W,R,C,S,O) {// 判断水印是否存在，如果存在，那么不执行if (document.getElementById('tp-watermark') != null) {return}var TpLine = parseInt(document.body.clientWidth/W) * 2; // 一行显示几列var StrLine = '';for(var i = 0; i < TpLine; i++){StrLine += ''+ CON +''}var DivLine = document.createElement("div");DivLine.innerHTML = StrLine;var TpColumn = parseInt(document.body.clientHeight/H) * 2; // 一列显示几行var StrColumn = '';for(var i = 0; i < TpColumn; i++){StrColumn += '

' + DivLine.innerHTML + '

';}var DivLayer = document.createElement("div");DivLayer.innerHTML = StrColumn;DivLayer.id = "tp-watermark"; // 给水印盒子添加类名DivLayer.style.position = "fixed";DivLayer.style.top = "0px"; // 整体水印距离顶部距离DivLayer.style.left = "-100px"; // 改变整体水印的left值DivLayer.style.zIndex = "99999"; // 水印页面层级DivLayer.style.pointerEvents = "none";document.body.appendChild(DivLayer); // 到页面中}// 移除水印方法function RemoveTpWatermark(){// 判断水印是否存在，如果存在，那么执行if (document.getElementById('tp-watermark') == null) {return}document.body.removeChild(document.getElementById('tp-watermark'));}

页面需要使用时

// 执行添加TpWatermark('水印','170','400','-20','red','70','.15');// TpWatermark(CON,H,W,R,C,S,O); // 值一一对应

CON => 水印文字内容

H => 水印行高

W => 水印宽度

R => 旋转度数(可为负值)

C => 水印字体颜色

S => 水印字体的大小

O => 水印透明度(0~1之间取值)

页面清除水印时

// 执行移除RemoveTpWatermark();

水印行与行之间需要交错显示，需添加css代码(padding-left的交错值，设置的水印宽度的一半即可)

/*通过此样式，控制行与行之间的交错显示  为0则不交错*/#tp-watermark div:nth-child(2n){padding-left: 200px;}

给鹏仔添加关注，后期版本会更新针对板块来添加水印。