标签：style watermark mask 水印 添加 div 页面 defaultSettings
页面添加水印详细方法以及调用如下所示：
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。