html水印使用js和div实现,js实现网页水印

js实现网页水印

效果图：

代码：

1

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

标签：style,网页,watermark,水印,mark,var,div,js,defaultSettings

来源： https://www.cnblogs.com/blank-longchuan/p/watermark.html