大牛的博客链接:https://www.cnblogs.com/daixinyu/p/6715398.html 提供给大家学习
我优化了几点
1,我把水印的样式单独提出来,这样会提高渲染水印的性能
2,他是给整个页面添加水印,我修改一下是给需要添加水印的容器来加水印
function watermark(settings) { //默认设置 var defaultSettings={ watermark_txt:"text", watermark_x:20,//水印起始位置x轴坐标 watermark_y:20,//水印起始位置Y轴坐标 watermark_rows:20,//水印行数 watermark_cols:20,//水印列数 watermark_x_space:100,//水印x轴间隔 watermark_y_space:50,//水印y轴间隔 watermark_210,//水印宽度 watermark_height:80,//水印长度 }; //采用配置项替换默认值,作用类似jquery.extend if(arguments.length===1&&typeof arguments[0] ==="object" ){ var src=arguments[0]||{}; for(key in src){ if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key]) continue; else if(src[key]) defaultSettings[key]=src[key]; } } // 获取需要添加水印的容器 var box = document.getElementById("box"); // 创建水印容器 mark-box var markBox= document.createElement('div'); markBox.className="mark-box"; //获取容器宽度 var page_width = box.offsetWidth; //获取页面最大高度 var page_height = box.offsetHeight; //如果将水印列数设置为0,或水印列数设置过大,超过页面最大宽度,则重新计算水印列数和水印x轴间隔 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)) { defaultSettings.watermark_cols = parseInt((page_width-defaultSettings.watermark_x+defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space)); defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1)); } //如果将水印行数设置为0,或水印行数设置过大,超过页面最大长度,则重新计算水印行数和水印y轴间隔 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)) { defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space)); defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1)); } var x; var y; for (var i = 0; i < defaultSettings.watermark_rows; i++) { y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i; for (var j = 0; j < defaultSettings.watermark_cols; j++) { x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j; var mask_div = document.createElement('div'); mask_div.id = 'mask_div' + i + j; mask_div.className = 'mask_div'; mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt)); //给水印定位 mask_div.style.left = x + 'px'; mask_div.style.top = y + 'px'; markBox.appendChild(mask_div); }; }; box.appendChild(markBox); }
下面是水印样式
.mask_div { position: absolute; overflow: hidden; z-index: 9999; opacity: 0.2; pointer-events: none; filter: alpha(opacity=20); font-size: 18px; font-family: 微软雅黑; color: rgb(170, 170, 170); text-align: center; 210px; height: 80px; display: block; -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); transform: rotate(-15deg); }
调用方法watermark({options})