• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

    给原生html中添加水印遮罩层的实现示例

    发布者: Error | 发布时间: 2025-6-16 12:26| 查看数: 61| 评论数: 0|帖子模式

    效果图

    代码
    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.     }

    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

    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";

    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.             };

    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.             }

    64.             var oTemp = document.createDocumentFragment();
    65.             // var oTemp = document.createElement("div");

    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);

    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;

    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.             };

    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.         };

    127.         watermarkUtils({ watermark_txt: "9527", watermark_width: 60, watermark_fontsize: "14px" }, watermarkId);
    128.     </script>
    129. </body>
    130. </html>
    复制代码
    核心代码
    1. const watermarkId = "watermarkId";

    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.     };

    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.     }

    34.     var oTemp = document.createDocumentFragment();
    35.     // var oTemp = document.createElement("div");

    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);

    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;

    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.     };

    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. };

    97. // 使用
    98. watermarkUtils({ watermark_txt: "9527", watermark_width: 60, watermark_fontsize: "14px" }, watermarkId);
    复制代码
    到此这篇关于给原生html中添加水印遮罩层的实现示例的文章就介绍到这了,更多相关html添加水印遮罩层内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

    来源：https://www.jb51.net/html5/769995.html
    免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表