首页
所有分类
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 相关文章推荐
JavaScript打印iframe内容示例代码
Aug 20 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
从零学习node.js之搭建http服务器（二）
Feb 21 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
vue cli 全面解析
Feb 28 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
html实现随机点名器的示例代码
如何利用JavaScript实现二叉搜索树
（开源）微信小程序+mqtt，esp8266温湿度读取
Javascript中的解构赋值语法详解
Apr 02 #Javascript
Ajax实现局部刷新的方法实例
前端学习——JavaScript原生实现购物车案例
JavaScript中关于预编译、作用域链和闭包的理解
YB400(2) YB217(1) 东方红(1) 森海(1) S2000(3) MX500(1) YB235(1) 再生机(1) 直流胆(1) 1 Tube Radio(1)
You might like
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
Python装饰器用法实例总结
2018/05/26 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
Python验证码截取识别代码实例
2020/05/16 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
英国安全产品购物网站：The Safe Shop
2017/03/20 全球购物
世界上最大的乐谱选择：Sheet Music Plus
2020/01/18 全球购物
Stokke美国官方网店：高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
商业活动邀请函
2014/02/04 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
多人股份制合作协议书
2016/03/19 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
各国货币符号大全
2022/02/17 杂记
浅谈如何保证Mysql主从一致
2022/03/13 MySQL