经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » HTML » 查看文章
给原生html中添加水印遮罩层的实现示例
来源：jb51　　时间：2021/4/6 9:27:51　　对本文有异议

效果图

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>水印遮罩</title>
  8. </head>
  9. <style>
  10.     .watermark_mask {
  11.         position: fixed;
  12.         top: 10px;
  13.     }
  14.  
  15.     .hello {
  16.         width: 500px;
  17.         height: 2048px;
  18.         margin: 0 auto;
  19.         background-color: pink;
  20.     }
  21. </style>
  22. <body>
  23.     <div class="hello">
  24.         Hello World
  25.  
  26.         <div style="margin-top: 600px;">Hello World 2</div>
  27.         <div style="margin-top: 1200px;">Hello World 3</div>
  28.     </div>
  29.     <div id="watermarkId" class="watermark_mask"></div>
  30.     <script>
  31.         const watermarkId = "watermarkId";
  32.  
  33.         // 水印遮罩函数
  34.         function watermarkUtils(settings, id) {
  35.             //默认设置
  36.             var defaultSettings={
  37.                 watermark_txt: "text",
  38.                 watermark_x: 10,//水印起始位置x轴坐标
  39.                 watermark_y: 20,//水印起始位置Y轴坐标
  40.                 watermark_rows: 55,//水印行数
  41.                 watermark_cols: 55,//水印列数
  42.                 watermark_x_space: 10,//水印x轴间隔
  43.                 watermark_y_space: 10,//水印y轴间隔
  44.                 watermark_color: '#000000',//水印字体颜色
  45.                 watermark_alpha: 0.2,//水印透明度
  46.                 watermark_fontsize: '15px',//水印字体大小
  47.                 watermark_font: '微软雅黑',//水印字体
  48.                 watermark_width: 50,//水印宽度
  49.                 watermark_height: 20,//水印长度
  50.                 watermark_angle: 25//水印倾斜度数
  51.             };
  52.  
  53.             //采用配置项替换默认值，作用类似jquery.extend
  54.             if(typeof settings === "object") {
  55.                 var src = settings;
  56.                 for(let key in src) {
  57.                     if(src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
  58.                     continue;
  59.                     else if(src[key])
  60.                     defaultSettings[key]=src[key];
  61.                 }
  62.             }
  63.  
  64.             var oTemp = document.createDocumentFragment();
  65.             // var oTemp = document.createElement("div");
  66.  
  67.             //获取页面最大宽度
  68.             var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
  69.             //获取页面最大长度
  70.             var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
  71.  
  72.             //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
  73.             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)) {
  74.                 defaultSettings.watermark_cols = parseInt((page_width-defaultSettings.watermark_x+defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
  75.                 defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
  76.             }
  77.             //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
  78.             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)) {
  79.                 defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
  80.                 defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
  81.             }
  82.             var x;
  83.             var y;
  84.             for (var i = 0; i < defaultSettings.watermark_rows; i++) {
  85.                 y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
  86.                 for (var j = 0; j < defaultSettings.watermark_cols; j++) {
  87.                     x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
  88.  
  89.                     var mask_div = document.createElement('div');
  90.                     mask_div.id = 'mask_div' + i + j;
  91.                     mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
  92.                     //设置水印div倾斜显示
  93.                     mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
  94.                     mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
  95.                     mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
  96.                     mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
  97.                     mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
  98.                     mask_div.style.visibility = "";
  99.                     mask_div.style.position = "absolute";
  100.                     //选不中
  101.                     mask_div.style.left = x + 'px';
  102.                     mask_div.style.top = y + 'px';
  103.                     mask_div.style.overflow = "hidden";
  104.                     mask_div.style.zIndex = "9999";
  105.                     mask_div.style.pointerEvents = "none";
  106.                     //mask_div.style.border="solid #eee 1px";
  107.                     mask_div.style.opacity = defaultSettings.watermark_alpha;
  108.                     mask_div.style.fontSize = defaultSettings.watermark_fontsize;
  109.                     mask_div.style.color = defaultSettings.watermark_color;
  110.                     mask_div.style.textAlign = "center";
  111.                     mask_div.style.width = defaultSettings.watermark_width + 'px';
  112.                     mask_div.style.height = defaultSettings.watermark_height + 'px';
  113.                     mask_div.style.display = "block";
  114.                     oTemp.appendChild(mask_div);
  115.                 };
  116.             };
  117.  
  118.             // document.body.appendChild(oTemp);
  119.             try {
  120.                 // console.log(document.getElementById(id), "document.getElementById(id)");
  121.                 document.getElementById(id).appendChild(oTemp);
  122.             } catch(error) {
  123.                 console.error(error, "遮罩异常");
  124.             }
  125.         };
  126.  
  127.         watermarkUtils({ watermark_txt: "9527", watermark_width: 60, watermark_fontsize: "14px" }, watermarkId);
  128.     </script>
  129. </body>
  130. </html>

核心代码

  1. const watermarkId = "watermarkId";
  2.  
  3. // 水印遮罩函数
  4. function watermarkUtils(settings, id) {
  5.     //默认设置
  6.     var defaultSettings={
  7.         watermark_txt: "text",
  8.         watermark_x: 10,//水印起始位置x轴坐标
  9.         watermark_y: 20,//水印起始位置Y轴坐标
  10.         watermark_rows: 55,//水印行数
  11.         watermark_cols: 55,//水印列数
  12.         watermark_x_space: 10,//水印x轴间隔
  13.         watermark_y_space: 10,//水印y轴间隔
  14.         watermark_color: '#000000',//水印字体颜色
  15.         watermark_alpha: 0.2,//水印透明度
  16.         watermark_fontsize: '15px',//水印字体大小
  17.         watermark_font: '微软雅黑',//水印字体
  18.         watermark_width: 50,//水印宽度
  19.         watermark_height: 20,//水印长度
  20.         watermark_angle: 25//水印倾斜度数
  21.     };
  22.  
  23.     //采用配置项替换默认值，作用类似jquery.extend
  24.     if(typeof settings === "object") {
  25.         var src = settings;
  26.         for(let key in src) {
  27.             if(src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
  28.             continue;
  29.             else if(src[key])
  30.             defaultSettings[key]=src[key];
  31.         }
  32.     }
  33.  
  34.     var oTemp = document.createDocumentFragment();
  35.     // var oTemp = document.createElement("div");
  36.  
  37.     //获取页面最大宽度
  38.     var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
  39.     //获取页面最大长度
  40.     var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
  41.  
  42.     //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
  43.     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)) {
  44.         defaultSettings.watermark_cols = parseInt((page_width-defaultSettings.watermark_x+defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
  45.         defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
  46.     }
  47.     //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
  48.     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)) {
  49.         defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
  50.         defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
  51.     }
  52.     var x;
  53.     var y;
  54.     for (var i = 0; i < defaultSettings.watermark_rows; i++) {
  55.         y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
  56.         for (var j = 0; j < defaultSettings.watermark_cols; j++) {
  57.             x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
  58.  
  59.             var mask_div = document.createElement('div');
  60.             mask_div.id = 'mask_div' + i + j;
  61.             mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
  62.             //设置水印div倾斜显示
  63.             mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
  64.             mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
  65.             mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
  66.             mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
  67.             mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
  68.             mask_div.style.visibility = "";
  69.             mask_div.style.position = "absolute";
  70.             //选不中
  71.             mask_div.style.left = x + 'px';
  72.             mask_div.style.top = y + 'px';
  73.             mask_div.style.overflow = "hidden";
  74.             mask_div.style.zIndex = "9999";
  75.             mask_div.style.pointerEvents = "none";
  76.             //mask_div.style.border="solid #eee 1px";
  77.             mask_div.style.opacity = defaultSettings.watermark_alpha;
  78.             mask_div.style.fontSize = defaultSettings.watermark_fontsize;
  79.             mask_div.style.color = defaultSettings.watermark_color;
  80.             mask_div.style.textAlign = "center";
  81.             mask_div.style.width = defaultSettings.watermark_width + 'px';
  82.             mask_div.style.height = defaultSettings.watermark_height + 'px';
  83.             mask_div.style.display = "block";
  84.             oTemp.appendChild(mask_div);
  85.         };
  86.     };
  87.  
  88.     // document.body.appendChild(oTemp);
  89.     try {
  90.         // console.log(document.getElementById(id), "document.getElementById(id)");
  91.         document.getElementById(id).appendChild(oTemp);
  92.     } catch(error) {
  93.         console.error(error, "遮罩异常");
  94.     }
  95. };
  96.  
  97. // 使用
  98. watermarkUtils({ watermark_txt: "9527", watermark_width: 60, watermark_fontsize: "14px" }, watermarkId);

到此这篇关于给原生html中添加水印遮罩层的实现示例的文章就介绍到这了,更多相关html添加水印遮罩层内容请搜索w3xue以前的文章或继续浏览下面的相关文章，希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML热门文章

  • 跨域iframe如何实现高度自适应？
  • HTML页面中使用Vue示例进阶（快速学会上手Vue）
  • HTML+JS实现监控切屏功能
  • Http Cookie机制及Cookie的实现原理
  • Go html/template 模板的使用实例详解
  • v-html渲染组件问题
  • 趣味图解HTTP状态码的含义
  • 一个不被程序员认为是编程语言的语言——HTML
  • html实现弹窗的实例
  • 如何实现批量截取整个网页完整长截图,批量将网页保存成图片web2pic/webshot/screencapture/html2picture

    • HTML推荐文章

  • WPF实现html中的table控件
  • HTML中script 标签中的那些属性
  • 使用Net将HTML简历导出为PDF格式
  • 让chatgpt将html中的图片转为base64方法示例
  • HTML页面中使用Vue示例进阶（快速学会上手Vue）
  • HTML 罗盘式时钟的实现
  • 给原生html中添加水印遮罩层的实现示例
  • HTML 基础
  • 像素数据YUV简介与觉存储格式介绍
  • 跨域iframe如何实现高度自适应？

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号