| tp | 您所在的位置：网站首页 › 网页去水印插件 › tp |
tp
|
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 += ''+ 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; }文档详情 tp-watermark.js网页添加水印插件,网页水印行与行交错 个人博客共享博客-专注前端行业精选-分享最具有价值的内容-鹏仔先生的博客 软件下载Q站-好东西不私藏 乐于分享-关注QQ最新动态,掌握QQ第一资讯,分享最具价值内容 |
【本文地址】
公司简介
联系我们