js实现网页水印

Posted 2022-07-11 blank-longchuan

js实现网页水印

 

 

效果图：

                       

                 

代码：

 

 1 <script>
 2             function watermark(t1,t2,t3)
 3                 var maxWidth = document.documentElement.clientWidth;
 4                 var maxHeight = document.documentElement.clientHeight;
 5                 var intervalWidth = 340;    //间隔宽度
 6                 var intervalheight = 200;   //间隔高度
 7                 var rowNumber = (maxWidth - 40 -200) / intervalWidth;    //横向个数
 8                 var coumnNumber = (maxHeight - 40-80) / intervalheight;   //纵向个数
 9                 
10                 //默认设置
11                 var defaultSettings = 
12                     watermark_color: ‘#aaa‘, //水印字体颜色
13                     watermark_alpha: 0.4, //水印透明度
14                     watermark_fontsize: ‘15px‘, //水印字体大小
15                     watermark_font: ‘微软雅黑‘, //水印字体
16                     watermark_width: 200, //水印宽度
17                     watermark_height: 80, //水印长度
18                     watermark_angle: 15 //水印倾斜度数
19                 ;
20                     
21                 var _temp = document.createDocumentFragment();
22                 for(var i = 0; i < rowNumber; i++)
23                     for(var j = 0; j < coumnNumber; j++)
24                         var x = intervalWidth*i + 20;
25                         var y = intervalheight*j + 30;
26                         var mark_div = document.createElement(‘div‘);
27                         mark_div.id = ‘mark_div‘ + i + j;
28                         mark_div.className = ‘mark_div‘;
29                         ///三个节点
30                         var span0 = document.createElement(‘div‘);
31                         span0.appendChild(document.createTextNode(t1));
32                         var span1 = document.createElement(‘div‘);
33                         span1.appendChild(document.createTextNode(t2));
34                         var span2 = document.createElement(‘div‘);
35                         span2.appendChild(document.createTextNode(t3));
36                         mark_div.appendChild(span0);
37                         mark_div.appendChild(span1);
38                         mark_div.appendChild(span2);
39                         //设置水印div倾斜显示
40                         mark_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
41                         mark_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
42                         mark_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
43                         mark_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
44                         mark_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
45                         mark_div.style.visibility = "";
46                         mark_div.style.position = "absolute";
47                         mark_div.style.left = x + ‘px‘;
48                         mark_div.style.top = y + ‘px‘;
49                         mark_div.style.overflow = "hidden";
50                         mark_div.style.zIndex = "9999";
51                         mark_div.style.pointerEvents = ‘none‘; //pointer-events:none  让水印不阻止交互事件
52                         mark_div.style.opacity = defaultSettings.watermark_alpha;
53                         mark_div.style.fontSize = defaultSettings.watermark_fontsize;
54                         mark_div.style.fontFamily = defaultSettings.watermark_font;
55                         mark_div.style.color = defaultSettings.watermark_color;
56                         mark_div.style.textAlign = "center";
57                         mark_div.style.width = defaultSettings.watermark_width + ‘px‘;
58                         mark_div.style.height = defaultSettings.watermark_height + ‘px‘;
59                         mark_div.style.display = "block";
60                         
61                         _temp.appendChild(mark_div);
62                     
63                 
64                 document.body.appendChild(_temp);
65             
66             
67             watermark(‘魔童降世之哪吒‘,‘灵珠‘,‘1388888888‘);
68         </script>