百变鹏仔-专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > JavaScript > 正文

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

作者:鹏仔先生日期:2020-08-10 14:58:00浏览:5344分类:JavaScript

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

作者:鹏仔先生

微信截图_20230315142436.png

    上周五,出差去改上个前端遗留的小问题,用到了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); // 值一一对应

CON  =>  水印文字内容

H    =>  水印行高

W    =>  水印宽度

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

C    =>  水印字体颜色

S    =>  水印字体的大小

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


页面清除水印时

	// 执行移除
	RemoveTpWatermark();


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

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


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯