html中加水印,静态html页面 添加水印效果 且 水印不可复制

1

2

3

4

5 //调整iframe高度

6 functioniFrameHeight() {7 varifm=document.getElementById("iframepage");8 if(ifm!= null) {9 ifm.height=window.screen.availHeight;10 }11 }12

13

14

15

16

17 //加水印方法

18 varmask_div=document.createElement('div');19 mask_div.id= 'mask_div1';20 mask_div.style.position= "absolute";21 mask_div.style.left= '20px';22 mask_div.style.top= '20px';23 mask_div.style.overflow= "hidden";24 mask_div.style.zIndex= "9999";25 mask_div.style.opacity= 0.3;26 document.body.appendChild(mask_div);27

28 functionwatermark(settings) {29

30 //默认设置

31 vardefaultSettings={32 watermark_txt:"text",33 watermark_x:20,//水印起始位置x轴坐标

34 watermark_y:20,//水印起始位置Y轴坐标

35 watermark_rows:20,//水印行数

36 watermark_cols:20,//水印列数

37 watermark_x_space:100,//水印x轴间隔

38 watermark_y_space:50,//水印y轴间隔

39 watermark_color:'#000000',//水印字体颜色

40 watermark_alpha:0.3,//水印透明度

41 watermark_fontsize:'18px',//水印字体大小

42 watermark_font:'微软雅黑',//水印字体

43 watermark_width:120,//水印宽度

44 watermark_height:80,//水印长度

45 watermark_angle:15//水印倾斜度数

46 };47 //采用配置项替换默认值，作用类似jquery.extend

48 if(arguments.length===1&&typeofarguments[0]==="object")49 {50 varsrc=arguments[0]||{};51 for(keyinsrc)52 {53 if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key])54 continue;55 else if(src[key])56 defaultSettings[key]=src[key];57 }58 }59

60 varoTemp=document.createDocumentFragment();61

62 //获取页面最大宽度

63 varpage_width=Math.max(document.body.scrollWidth,document.body.clientWidth);64 //获取页面最大长度

65 varpage_height=Math.max(document.body.scrollHeight,document.body.clientHeight);66

67 //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔

68 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)) {69 defaultSettings.watermark_cols=parseInt((page_width-defaultSettings.watermark_x+defaultSettings.watermark_x_space)/(defaultSettings.watermark_width+defaultSettings.watermark_x_space));70 defaultSettings.watermark_x_space=parseInt((page_width-defaultSettings.watermark_x-defaultSettings.watermark_width*defaultSettings.watermark_cols)/(defaultSettings.watermark_cols- 1));71 }72 //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔

73 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)) {74 defaultSettings.watermark_rows=parseInt((defaultSettings.watermark_y_space+page_height-defaultSettings.watermark_y)/(defaultSettings.watermark_height+defaultSettings.watermark_y_space));75 defaultSettings.watermark_y_space=parseInt(((page_height-defaultSettings.watermark_y)-defaultSettings.watermark_height*defaultSettings.watermark_rows)/(defaultSettings.watermark_rows- 1));76 }77 varx;78 vary;79 for(vari= 0; i

84 varmask_div=document.createElement('div');85 mask_div.id= 'mask_div' +i+j;86 mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));87 //设置水印div倾斜显示

88 mask_div.style.webkitTransform= "rotate(-" +defaultSettings.watermark_angle+ "deg)";89 mask_div.style.MozTransform= "rotate(-" +defaultSettings.watermark_angle+ "deg)";90 mask_div.style.msTransform= "rotate(-" +defaultSettings.watermark_angle+ "deg)";91 mask_div.style.OTransform= "rotate(-" +defaultSettings.watermark_angle+ "deg)";92 mask_div.style.transform= "rotate(-" +defaultSettings.watermark_angle+ "deg)";93 mask_div.style.visibility= "";94 mask_div.style.position= "absolute";95 mask_div.style.left=x+ 'px';96 mask_div.style.top=y+ 'px';97 mask_div.style.overflow= "hidden";98 mask_div.style.zIndex= "9999";99 //mask_div.style.border="solid #eee 1px";

100 mask_div.style.opacity=defaultSettings.watermark_alpha;101 mask_div.style.fontSize=defaultSettings.watermark_fontsize;102 mask_div.style.fontFamily=defaultSettings.watermark_font;103 mask_div.style.color=defaultSettings.watermark_color;104 mask_div.style.textAlign= "center";105 mask_div.style.width=defaultSettings.watermark_width+ 'px';106 mask_div.style.height=defaultSettings.watermark_height+ 'px';107 mask_div.style.display= "block";108 mask_div.style.pointerEvents= "none";//禁止水印被复制并防止遮挡【实体虚化】

109 oTemp.appendChild(mask_div);110 };111 };112 document.body.appendChild(oTemp);113 }114

115 window.οnlοad=function(){116 watermark({ watermark_txt:"测试"});117 };118

119 //window.onresize = function () {

120 //watermark({ watermark_txt: "测试",watermark_width:50 })

121 //};

122

123

124

125 name="iframepage"frameBorder=0scrolling=nowidth="100%"

126 onLoad="iFrameHeight();">

127

128

129