首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onApril 02, 2021

效果图

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

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水印遮罩</title>
</head>
<style>
    .watermark_mask {
        position: fixed;
        top: 10px;
    }

    .hello {
        width: 500px;
        height: 2048px;
        margin: 0 auto;
        background-color: pink;
    }
</style>
<body>
    <div class="hello">
        Hello World

        <div style="margin-top: 600px;">Hello World 2</div>
        <div style="margin-top: 1200px;">Hello World 3</div>
    </div>
    <div id="watermarkId" class="watermark_mask"></div>
    <script>
        const watermarkId = "watermarkId";

        // 水印遮罩函数
        function watermarkUtils(settings, id) {
            //默认设置
            var defaultSettings={
                watermark_txt: "text",
                watermark_x: 10,//水印起始位置x轴坐标
                watermark_y: 20,//水印起始位置Y轴坐标
                watermark_rows: 55,//水印行数
                watermark_cols: 55,//水印列数
                watermark_x_space: 10,//水印x轴间隔
                watermark_y_space: 10,//水印y轴间隔
                watermark_color: '#000000',//水印字体颜色
                watermark_alpha: 0.2,//水印透明度
                watermark_fontsize: '15px',//水印字体大小
                watermark_font: '微软雅黑',//水印字体
                watermark_width: 50,//水印宽度
                watermark_height: 20,//水印长度
                watermark_angle: 25//水印倾斜度数
            };

            //采用配置项替换默认值，作用类似jquery.extend
            if(typeof settings === "object") {
                var src = settings;
                for(let key in src) {
                    if(src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
                    continue;
                    else if(src[key])
                    defaultSettings[key]=src[key];
                }
            }

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

            //获取页面最大宽度
            var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
            //获取页面最大长度
            var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight);

            //如果将水印列数设置为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.appendChild(document.createTextNode(defaultSettings.watermark_txt));
                    //设置水印div倾斜显示
                    mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.visibility = "";
                    mask_div.style.position = "absolute";
                    //选不中
                    mask_div.style.left = x + 'px';
                    mask_div.style.top = y + 'px';
                    mask_div.style.overflow = "hidden";
                    mask_div.style.zIndex = "9999";
                    mask_div.style.pointerEvents = "none";
                    //mask_div.style.border="solid #eee 1px";
                    mask_div.style.opacity = defaultSettings.watermark_alpha;
                    mask_div.style.fontSize = defaultSettings.watermark_fontsize;
                    mask_div.style.color = defaultSettings.watermark_color;
                    mask_div.style.textAlign = "center";
                    mask_div.style.width = defaultSettings.watermark_width + 'px';
                    mask_div.style.height = defaultSettings.watermark_height + 'px';
                    mask_div.style.display = "block";
                    oTemp.appendChild(mask_div);
                };
            };

            // document.body.appendChild(oTemp);
            try {
                // console.log(document.getElementById(id), "document.getElementById(id)");
                document.getElementById(id).appendChild(oTemp);
            } catch(error) {
                console.error(error, "遮罩异常");
            }
        };

        watermarkUtils({ watermark_txt: "9527", watermark_width: 60, watermark_fontsize: "14px" }, watermarkId);
    </script>
</body>
</html>

核心代码

const watermarkId = "watermarkId";

// 水印遮罩函数
function watermarkUtils(settings, id) {
    //默认设置
    var defaultSettings={
        watermark_txt: "text",
        watermark_x: 10,//水印起始位置x轴坐标
        watermark_y: 20,//水印起始位置Y轴坐标
        watermark_rows: 55,//水印行数
        watermark_cols: 55,//水印列数
        watermark_x_space: 10,//水印x轴间隔
        watermark_y_space: 10,//水印y轴间隔
        watermark_color: '#000000',//水印字体颜色
        watermark_alpha: 0.2,//水印透明度
        watermark_fontsize: '15px',//水印字体大小
        watermark_font: '微软雅黑',//水印字体
        watermark_width: 50,//水印宽度
        watermark_height: 20,//水印长度
        watermark_angle: 25//水印倾斜度数
    };

    //采用配置项替换默认值，作用类似jquery.extend
    if(typeof settings === "object") {
        var src = settings;
        for(let key in src) {
            if(src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
            continue;
            else if(src[key])
            defaultSettings[key]=src[key];
        }
    }

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

    //获取页面最大宽度
    var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
    //获取页面最大长度
    var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight);

    //如果将水印列数设置为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.appendChild(document.createTextNode(defaultSettings.watermark_txt));
            //设置水印div倾斜显示
            mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.visibility = "";
            mask_div.style.position = "absolute";
            //选不中
            mask_div.style.left = x + 'px';
            mask_div.style.top = y + 'px';
            mask_div.style.overflow = "hidden";
            mask_div.style.zIndex = "9999";
            mask_div.style.pointerEvents = "none";
            //mask_div.style.border="solid #eee 1px";
            mask_div.style.opacity = defaultSettings.watermark_alpha;
            mask_div.style.fontSize = defaultSettings.watermark_fontsize;
            mask_div.style.color = defaultSettings.watermark_color;
            mask_div.style.textAlign = "center";
            mask_div.style.width = defaultSettings.watermark_width + 'px';
            mask_div.style.height = defaultSettings.watermark_height + 'px';
            mask_div.style.display = "block";
            oTemp.appendChild(mask_div);
        };
    };

    // document.body.appendChild(oTemp);
    try {
        // console.log(document.getElementById(id), "document.getElementById(id)");
        document.getElementById(id).appendChild(oTemp);
    } catch(error) {
        console.error(error, "遮罩异常");
    }
};

// 使用
watermarkUtils({ watermark_txt: "9527", watermark_width: 60, watermark_fontsize: "14px" }, watermarkId);

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

 

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

- Author -

weixin_44953227

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 版元素拖拽原型代码
Apr 25 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
Jquery1.9.1源码分析系列（六）延时对象应用之jQuery.ready
Nov 24 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
html实现随机点名器的示例代码
如何利用JavaScript实现二叉搜索树
（开源）微信小程序+mqtt，esp8266温湿度读取
Javascript中的解构赋值语法详解
Apr 02 #Javascript
Ajax实现局部刷新的方法实例
前端学习——JavaScript原生实现购物车案例
JavaScript中关于预编译、作用域链和闭包的理解
AngularJS(2) 最终幻想(1) 守望先锋(1) Docker(14) 城市猎人(1) 西索(1) HAM-2000(1) 帝国时代(1) explain(2) 波段(1)
You might like
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
Js动态创建div
2008/09/25 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
深入理解JavaScript系列（17）：面向对象编程之概论详细介绍
2015/03/04 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
shiro授权的实现原理
2017/09/21 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
莫斯科大型旅游休闲商品超市：Camping.ru
2020/09/16 全球购物
欧姆龙医疗欧洲有限公司：Omron Healthcare Europe B.V
2020/06/13 全球购物
软件毕业生个人鉴定
2014/03/03 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
西安大雁塔导游词
2015/02/10 职场文书
教师个人自我评价
2015/03/04 职场文书
荒岛余生观后感
2015/06/09 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL