html表格中加水印,给html页面添加水印
functionwatermark(settings) {//默认设置
var defaultSettings ={
watermark_txt:"text",
watermark_x:20, //水印起始位置x轴坐标
watermark_y: 20, //水印起始位置Y轴坐标
watermark_rows: 20, //水印行数
watermark_cols: 20, //水印列数
watermark_x_space: 100, //水印x轴间隔
watermark_y_space: 50, //水印y轴间隔
watermark_color: '#aaa', //水印字体颜色
watermark_alpha: 0.4, //水印透明度
watermark_fontsize: '15px', //水印字体大小
watermark_font: '微软雅黑', //水印字体
watermark_width: 210, //水印宽度
watermark_height: 80, //水印长度
watermark_angle: 20 //水印倾斜度数
};if (arguments.length === 1 && typeof arguments[0] === "object") {var src = arguments[0] ||{};for (key insrc) {if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) continue;else if (src[key]) defaultSettings[key] =src[key];
}
}var oTemp =document.createDocumentFragment();//获取页面最大宽度
var page_width =Math.max(document.body.scrollWidth, document.body.clientWidth);var cutWidth = page_width * 0.0150;var page_width = page_width -cutWidth;//获取页面最大高度
var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight) + 450;
page_height= Math.max(page_height, window.innerHeight - 30);//如果将水印列数设置为0,或水印列数设置过大,超过页面最大宽度,则重新计算水印列数和水印x轴间隔
if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) >page_width)) {
defaultSettings.watermark_cols= parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width +defaultSettings.watermark_x_space));
defaultSettings.watermark_x_space= parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
}//如果将水印行数设置为0,或水印行数设置过大,超过页面最大长度,则重新计算水印行数和水印y轴间隔
if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) >page_height)) {
defaultSettings.watermark_rows= parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height +defaultSettings.watermark_y_space));
defaultSettings.watermark_y_space= parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
}varx;vary;for (var i = 0; i < defaultSettings.watermark_rows; i++) {
y= defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) *i;for (var j = 0; j < defaultSettings.watermark_cols; j++) {
x= defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) *j;var mask_div = document.createElement('div');
mask_div.id= 'mask_div' + i +j;
mask_div.className= 'mask_div';
mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));//设置水印div倾斜显示
mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.MozTransform= "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.msTransform= "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.OTransform= "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.transform= "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.visibility= "";
mask_div.style.position= "absolute";
mask_div.style.left= x + 'px';
mask_div.style.top= y + 'px';
mask_div.style.overflow= "hidden";
mask_div.style.zIndex= "9999";//让水印不遮挡页面的点击事件
mask_div.style.pointerEvents = 'none';
mask_div.style.opacity=defaultSettings.watermark_alpha;
mask_div.style.fontSize=defaultSettings.watermark_fontsize;
mask_div.style.fontFamily=defaultSettings.watermark_font;
mask_div.style.color=defaultSettings.watermark_color;
mask_div.style.textAlign= "center";
mask_div.style.width= defaultSettings.watermark_width + 'px';
mask_div.style.height= defaultSettings.watermark_height + 'px';
mask_div.style.display= "block";
oTemp.appendChild(mask_div);
};
};
document.body.appendChild(oTemp);
}functiongetNow() {var d = newDate();var year =d.getFullYear();var month = change(d.getMonth() + 1);var day =change(d.getDate());var hour =change(d.getHours());var minute =change(d.getMinutes());var second =change(d.getSeconds());functionchange(t) {if (t < 10) {return "0" +t;
}else{returnt;
}
}var time = year + '年' + month + '月' + day + '日 ' + hour + '时' + minute + '分' + second + '秒';returntime;
}
html表格中加水印,给html页面添加水印相关推荐
- html中加水印,静态html页面 添加水印效果 且 水印不可复制
1 2 3 4 5 //调整iframe高度 6 functioniFrameHeight() {7 varifm=document.getElementById("iframepage&q ...
- PPT中加水印的方法
PPT中加水印的方法网上介绍的比较多的是在PPT母版中加艺术字的方法,这种方法有时候只能对部分页面加上水印,且艺术字的透明度无法调节,非常不方便,本人介绍另外一种PPT加水印的方法: 插入->艺 ...
- html表格中加横线,Word表格中如何加一条横线
有时候要用word做一个表格或者一份协议书,都需要画下划线,打印出来后,上面可以填写内容如何给表格里面加一条横线呢?下面就来告诉你怎么做. 在word表格中加一条横线的几种方法介绍: Word给表格里 ...
- js添加网页水印和three.js场景中加水印
我们在日常网页开发的时候,可能想给自己的网页或者canvas里面添加水印,增添个人标记,我这里分为普通静态html页面和threejs中3d场景里面添加水印功能. 一 静态html页面添加水印 你只需 ...
- html中加载解析,HTML页面加载和解析流程详细介绍
序言: 我一直都认为"网页制作"这个词是一个不怎么高端的词,在我的印象中网页制作的词是没有生命力的一个制作,我喜欢用HTML 这样简单直接,这词凸显高端,有大气漂亮的UI.一套完美 ...
- html表格中加横线,表格下划线怎么打出来
excel怎么打出下划线_______和大横线-----(不是小怎么自由的打出来,CSS布局HTML小编今天和大家分享方法 excel下划线可通过字体设置下划线,大横线可通过Shift加减号-实现. ...
- html表格中加函数,excel中的substitute函数
Excel中substitute函数能否替换多个可能出现的关键字 substitute函数在excel中如何使用(人民币大写) 假设将A1单元格中"1"替换为"2&quo ...
- 怎么在html的表格中加筛选,excel中表头合并单元格的筛选
EXCEL中表头合并,怎么实现筛选数据? 亲,如下面的动画演示,选中第5行,点击菜单"数据","筛驯. excel中有合并单元格的行怎么才能筛选整个表格其中 直接对合并过 ...
- 前端页面添加全局水印或指定页面添加水印
前言 为了防止信息泄露或知识产权被侵犯,在web的世界里,对于图片文档等增加水印处理是十分有必要的.水印的添加根据环境可以分为两大类,前端浏览器环境添加和后端服务环境添加. 今天介绍的就是通过canv ...
最新文章
- CF Round #426 (Div. 2) The Useless Toy 思维 水题
- 多表联合查询存储过程
- 1045 快速排序 (25 分)
- SurfaceGo配置轻量级LaTeX写作环境(MiKTeX)
- WebService 工作原理及实例教程
- ssh 执行 SSH2_MSG_SERVICE_ACCEPT 慢问题
- 由一条微博引发的 — Xcode LLDB 调试断点总结
- LayuiAdmin 滚动条设置问题解决
- 链表常见操作java实现一:链表初始化,求链表长度
- 数据分析师—Excel实战篇
- HB哈勃与HB公链【尊皇社区】深度揭秘分析!
- CSS 的相对单位 em 与 ex
- 苹果手机对html的要求,《原神》ios要什么配置 ios端配置要求一览
- python语言求年份的生肖
- java过滤器不管用_java中过滤器不起作用的原因
- FinClip11月产品更新:FIDE 插件开发功能优化;文档中心捉“虫”竞赛火热开启
- 小米(MIUI)手机监听短信的两种解决方案
- 小米文件管理连接服务器,小米文件管理器中的远程管理无法连接解决方法
- localtime 和 localtime_r
- 剑网三服务器一直未响应,《剑网3》大师赛第二个比赛日赛后采访回顾