页面添加水印
作者：互联网
页面添加水印详细方法以及调用如下所示：
1 // 水印
2 (function (watermark) {
3 window.watermarkdivs = [];
4 // 加载水印
5 var loadMark = function (settings) {
6 var defaultSettings = {
7 watermark_txt: "",
8 watermark_x: 20,//水印起始位置x轴坐标
9 watermark_y: 20,//水印起始位置Y轴坐标
10 watermark_rows: 0,//水印行数
11 watermark_cols: 0,//水印列数
12 watermark_x_space: 40,//水印x轴间隔
13 watermark_y_space: 30,//水印y轴间隔
14 watermark_font: '微软雅黑',//水印字体
15 watermark_color: '#F08080',//水印字体颜色
16 watermark_fontsize: '28px',//水印字体大小
17 watermark_alpha: 0.15,//水印透明度，要求设置在大于等于0.003
18 watermark_width: 240,//水印宽度
19 watermark_height: 70,//水印长度
20 watermark_angle: 20//水印倾斜度数
21 };
22 //采用配置项替换默认值，作用类似jquery.extend
23 if (arguments.length === 1 && typeof arguments[0] === "object") {
24 var src = arguments[0] || {};
25 for (key in src) {
26 if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
27 continue;
28 else if (src[key])
29 defaultSettings[key] = src[key];
30 }
31 }
32 if (window.watermarkdivs && window.watermarkdivs.length > 0) {
33 document.body.removeChild(document.getElementById("otdivid"));
34 window.watermarkdivs = [];
35 }
36 //获取页面最大宽度
37 var page_width = Math.max(document.body.scrollWidth, document.body.clientWidth);
38 //获取页面最大长度
39 var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight);
40 // var page_height = Math.max(document.body.scrollTop,document.body.clientHeight);
41 // 创建文档碎片
42 var oTemp = document.createDocumentFragment();
43 //创建水印外壳div
44 var otdiv = document.getElementById("otdivid");
45 if (!otdiv) {
46 otdiv = document.createElement('div');
47 otdiv.id = "otdivid";
48 otdiv.style.pointerEvents = "none";
49 document.body.appendChild(otdiv);
50 }
51 //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
52 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)) {
53 defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
54 defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
55 }
56 //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
57 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)) {
58 defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
59 defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
60 }
61 var x;
62 var y;
63 for (var i = 0; i < defaultSettings.watermark_rows; i++) {
64 y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
65 for (var j = 0; j < defaultSettings.watermark_cols; j++) {
66 x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
67 var mask_div = document.createElement('div');
68 var oText = document.createTextNode(defaultSettings.watermark_txt);
69 mask_div.appendChild(oText);
70 // 设置水印相关属性start
71 mask_div.id = 'mask_div' + i + j;
72 mask_div.onselectstart = "return false";
73 //设置水印div倾斜显示
74 mask_div.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.96593, M12=0.25882, M21=-0.25882, M22=0.96593) progid:DXImageTransform.Microsoft.Alpha(opacity=15)";
75 //逆时针旋转45度：progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.70710678118655, M12=0.70710678118655, M21=-0.70710678118655, M22=0.70710678118655);
76 mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
77 mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
78 mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
79 mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
80 mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
81 mask_div.style.visibility = "";
82 mask_div.style.position = "fixed";
83 //选不中
84 mask_div.style.left = x + 'px';
85 mask_div.style.top = y + 'px';
86 mask_div.style.overflow = "hidden";
87 mask_div.style.zIndex = "9999";
88 //mask_div.style.border="solid #eee 1px";
89 mask_div.style.opacity = defaultSettings.watermark_alpha;
90 mask_div.style.fontSize = defaultSettings.watermark_fontsize;
91 mask_div.style.lineHeight = defaultSettings.watermark_fontsize;
92 mask_div.style.fontFamily = defaultSettings.watermark_font;
93 mask_div.style.color = defaultSettings.watermark_color;
94 mask_div.style.textAlign = "center";
95 mask_div.style.width = defaultSettings.watermark_width + 'px';
96 mask_div.style.height = defaultSettings.watermark_height + 'px';
97 mask_div.style.display = "block";
98 //设置水印相关属性end
99 //附加到文档碎片中
100 otdiv.appendChild(mask_div);
101 otdiv.style.cursor = "default";
102 window.watermarkdivs.push(otdiv); //控制页面大小变化时水印字体
103 };
104 };
105 //一次性添加到document中
106 document.body.appendChild(oTemp);
107 };
108 watermark.init = function (settings) {
109 window.onload = function () {
110 loadMark(settings);
111 };
112 window.onresize = function () {
113 loadMark(settings);
114 };
115 };
116 watermark.load = function (settings) {
117 loadMark(settings);
118 };
119 })(window.watermark = {});
120 /*
121 * Pointer Events Polyfill: Adds support for the style attribute
122 * "pointer-events: none" to browsers without this feature (namely, IE).
123 * (c) 2013, Kent Mewhort, licensed under BSD. See LICENSE.txt for details.
124 */
125 // constructor
126 function PointerEventsPolyfill(options) {
127 // set defaults
128 this.options = {
129 selector: '*',
130 mouseEvents: ['click', 'dblclick', 'mousedown', 'mouseup'],
131 usePolyfillIf: function () {
132 // if (navigator.appName == 'Microsoft Internet Explorer')
133 // {
134 /* jshint ignore:start */
135 var agent = navigator.userAgent;
136 // if (agent.match(/MSIE ([0-9]{1,}[\.0-9]{0,})/) != null) {
137 // var version = parseFloat(RegExp.jQ1);
138 // if (version < 11)
139 return true;
140 // }
141 /* jshint ignore:end */
142 // }
143 // return false;
144 }
145 };
146 if (options) {
147 var obj = this;
148 $.each(options, function (k, v) {
149 obj.options[k] = v;
150 });
151 }
152 if (this.options.usePolyfillIf())
153 this.register_mouse_events();
154 }
155 /**
156 * singleton initializer
157 *
158 * @param {object} options Polyfill options.
159 * @return {object} The polyfill object.
160 */
161 PointerEventsPolyfill.initialize = function (options) {
162 /* jshint ignore:start */
163 if (PointerEventsPolyfill.singleton == null)
164 PointerEventsPolyfill.singleton = new PointerEventsPolyfill(options);
165 /* jshint ignore:end */
166 return PointerEventsPolyfill.singleton;
167 };
168 /**
169 * handle mouse events w/ support for pointer-events: none
170 */
171 PointerEventsPolyfill.prototype.register_mouse_events = function () {
172 // register on all elements (and all future elements) matching the selector
173 $(document).on(
174 this.options.mouseEvents.join(' '),
175 this.options.selector,
176 function (e) {
177 if ($(this).css('pointerEvents') == 'none') {
178 // peak at the element below
179 var origDisplayAttribute = $(this).css('display');
180 $(this).css('display', 'none');
181 var underneathElem = document.elementFromPoint(
182 e.clientX,
183 e.clientY);
184 if (origDisplayAttribute)
185 $(this)
186 .css('display', origDisplayAttribute);
187 else
188 $(this).css('display', '');
189 // fire the mouse event on the element below
190 e.target = underneathElem;
191 $(underneathElem).trigger(e);
192 return false;
193 }
194 return true;
195 });
196 };
197
198
199
200 调用方式：watermark.load({ watermark_txt: phone }); watermark_txt：代表水印文字
201 PointerEventsPolyfill.initialize({});
标签：style,watermark,mask,水印,添加,div,页面,defaultSettings 来源： https://www.cnblogs.com/qsszyl03290920/p/13229160.html