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>