js网页添加水印
来源:互联网 发布:32位ubuntu镜像下载 编辑:程序博客网 时间:2024/06/05 14:43
////////////////////////////////////////////////////改编摘自:http://www.cnblogs.com/daixinyu/p/6715398.html//hjl 2017年6月19日19:25:43////////////////////////////////////////////////////function watermark(settings) { //默认设置 var defaultSettings={ watermark_txt0:"text", watermark_txt1:"text", watermark_txt2:"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:15//水印倾斜度数 }; //采用配置项替换默认值,作用类似jquery.extend if(arguments.length===1&&typeof arguments[0] ==="object" ) { var src=arguments[0]||{}; for(key in src) { 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; // var page_height = document.body.scrollHeight+document.body.scrollTop; //如果将水印列数设置为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)); } var x; var y; 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'; ///三个节点 var span0 = document.createElement('div'); span0.appendChild(document.createTextNode(defaultSettings.watermark_txt0)); var span1 = document.createElement('div'); span1.appendChild(document.createTextNode(defaultSettings.watermark_txt1)); var span2 = document.createElement('div'); span2.appendChild(document.createTextNode(defaultSettings.watermark_txt2)); mask_div.appendChild(span0); mask_div.appendChild(span1); mask_div.appendChild(span2); //设置水印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';//pointer-events:none 让水印不遮挡页面的点击事件 //mask_div.style.border="solid #eee 1px"; 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);}//对Date的扩展,将 Date 转化为指定格式的String//月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,//年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)//例子://(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423//(new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18//author: meizzDate.prototype.Format = function (fmt) { var o = {"M+": this.getMonth() + 1, //月份"d+": this.getDate(), //日"h+": this.getHours(), //小时"m+": this.getMinutes(), //分"s+": this.getSeconds(), //秒"q+": Math.floor((this.getMonth() + 3) / 3), //季度"S": this.getMilliseconds() //毫秒};if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));return fmt;}function getTime(){return new Date().Format("yyyy年MM月dd日 hh:mm:ss");}
原作者之前效果是这样的 水印文字没有指定换行 是根据宽度来的
并且加入了时间格式化的方法
因为业务需求是三行字 而且长度不一定 所以更改了下 效果如下
引入js
调用方法:
watermark({watermark_txt0:'主题',watermark_txt1:username,watermark_txt2:nowTime});
阅读全文
0 0
- js网页添加水印
- js添加水印文字
- JS添加文字水印
- js添加水印
- JavaScript给网页添加水印
- Js实现动态添加水印
- JS模拟实现图片添加水印功能
- 为网页中的图片添加水印的效果
- 为网页中的图片添加水印的效果
- 添加水印
- 添加水印
- 添加水印
- 添加水印
- 添加水印
- 添加水印
- 添加水印
- Java添加水印+图片水印+文字水印
- java 添加水印 清除水印
- PHP 的正则相关函数总结
- 最后的纪念——FromATP
- 冒泡
- 11. dws配置与调试
- Webdirver API (Python版)
- js网页添加水印
- android webview JS对话框 不能弹出 解决办法
- 关于见习的课后思考
- TabLayout设置字体为normal
- 守护进程代码过程概要
- FFmpeg源代码简单分析:libavdevice的avdevice_register_all()
- 12. len调试日志(AF)
- 一. SpringBoot集成实例系列-xml型单数据源mybatis
- Windows 平台安装 MongoDB与遇到的问题