tp-watermark.js网页添加水印插件
作者：鹏仔先生
上周五，出差去改上个前端遗留的小问题，用到了watermark.js这个网站添加水印插件，功能很简单，就是给网页添加个水印，我看了下网上，有很多种，基本都是Canvas实现，我想要的是行与行之间交错效果，可是没有找到对应文档，看的烦的...
那就自己简单写个网页添加水印插件吧， tp-watermark.js
身为初级前端，写法比较low，但是功能很完善，请大家多多指导
下载插件：点击下载
DEMO下载：点击下载
下载完引入插件
使用水印
TpWatermark(CON,H,W,R,C,S,O);
删除水印
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 += '<span style="display: inline-block; line-height:' + H + 'px; width:' + W + 'px; text-align: center; transform:rotate(' + R + 'deg); color:' + C + '; font-size:'+ S + 'px; opacity:' + O + ';">'+ CON +'</span>'
}
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 += '<div style="white-space: nowrap;">' + DivLine.innerHTML + '</div>';
}
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); // 值一一对应页面清除水印时
// 执行移除 RemoveTpWatermark();
水印行与行之间需要交错显示，需添加css代码(padding-left的交错值，设置的水印宽度的一半即可)
/*通过此样式，控制行与行之间的交错显示 为0则不交错*/
#tp-watermark div:nth-child(2n){
padding-left: 200px;
}本文链接：https://my.lmcjl.com/post/19712.html
展开阅读全文
4 评论