百变鹏仔-专注前端行业精选
tp-watermark.js网页添加水印插件
作者:鹏仔先生日期:2020-08-10 14:58:00浏览:5344分类:JavaScript
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); // 值一一对应
CON => 水印文字内容
H => 水印行高
W => 水印宽度
R => 旋转度数(可为负值)
C => 水印字体颜色
S => 水印字体的大小
O => 水印透明度(0~1之间取值)
页面清除水印时
// 执行移除 RemoveTpWatermark();
水印行与行之间需要交错显示,需添加css代码(padding-left的交错值,设置的水印宽度的一半即可)
/*通过此样式,控制行与行之间的交错显示 为0则不交错*/ #tp-watermark div:nth-child(2n){ padding-left: 200px; }
手机扫码访问
猜你还喜欢
- 08-09 vue动态修改网站的icon图标
- 07-08 VUE中ECharts提示框tooltip自动切换
- 07-03 网页中生成微信小程序二维码
- 07-02 微信小程序判断是安卓还是苹果
- 06-28 vue实现表格自动滚动功能 vue-seamless-scroll
- 04-19 VUE实现点击复制
- 04-16 vue将页面生成图片 vue生成海报
- 04-16 vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
- 04-16 table固定表头和列 css实现表格固定表头
- 04-07 vue跳转页面清除历史记录,页面跳转删除历史记录
- 02-22 VUE You are using the runtime-only build of Vue where the template compiler is not available. Either
- 01-19 elementui多选上传 before-upload 格式效验错误总会触发before-remove (elementui多选上传on-success只执行了一次,只上传成功了一条)
暂无评论,来添加一个吧。