码迷,mamicode.com
首页 > Web开发 > 详细

js实现网页水印

时间:2019-08-13 22:40:22      阅读:422      评论:0      收藏:0      [点我收藏+]

标签:com   微软雅黑   微软   ++   mst   osi   spl   row   透明   

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>

 

js实现网页水印

标签:com   微软雅黑   微软   ++   mst   osi   spl   row   透明   

原文地址:https://www.cnblogs.com/blank-longchuan/p/watermark.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!