<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Watermarks</title>

    </head>

    <style type="text/css">

        html,

        body {

            height: 100vh;

            width: 100%;

            overflow: hidden;

        }

    </style>

    <body>

        <script>

            watermark({

                watermark_txt: 'qinhuansky'　　//设置水印文本

            });

            function watermark(settings) {

                //默认设置

                let defaultSettings = {

                    watermark_txt: "text",

                    watermark_x: 20, //水印起始位置x轴坐标

                    watermark_y: 20, //水印起始位置Y轴坐标

                    watermark_rows: 20, //水印行数

                    watermark_cols: 20, //水印列数

                    watermark_x_space: 80, //水印x轴间隔

                    watermark_y_space: 50, //水印y轴间隔

                    watermark_color: '#aaa', //水印字体颜色

                    watermark_alpha: 0.3, //水印透明度

                    watermark_fontsize: '15px', //水印字体大小

                    watermark_font: '微软雅黑', //水印字体

                    watermark_width: 100, //水印宽度

                    watermark_height: 50, //水印长度

                    watermark_angle: 15 //水印倾斜度数

                };

                Object.assign(defaultSettings, settings);

                let oTemp = document.createDocumentFragment();

                //获取页面最大宽度

                // let p_width = Math.max(document.body.scrollWidth, document.body.clientWidth);

                // let cutWidth = p_width * 0.0150;

                // let page_width = p_width - cutWidth;

                let page_width = document.body.clientWidth;

                //获取页面最大高度

                // let page_height = Math.max(document.body.scrollHeight, document.body.clientHeight) + 450;

                let page_height = document.body.scrollHeight + document.body.scrollTop;

                //如果将水印列数设置为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));

                }

                let x;

                let y;

                for (let i = 0; i < defaultSettings.watermark_rows; i++) {

                    y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;

                    for (let j = 0; j < defaultSettings.watermark_cols; j++) {

                        x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;

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

                        //设置水印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'; //pointer-events:none 让水印不遮挡页面的点击事件

                        mask_div.style.opacity = defaultSettings.watermark_alpha;

                        mask_div.style.fontSize = defaultSettings.watermark_fontsize;

                        mask_div.style.fontFamily = defaultSettings.watermark_font;

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

            }

        </script>

    </body>

原文链接 ：https://www.jb51.net/article/163216.htm （在此做记录，侵权立删）

通过js渲染高层级DOM实现网页加水印的更多相关文章

  1. 网页加水印 svg 方式

    /** *网页加水印 svg 方式 * * @export * @param {*} [{ * container = document.body, * content = '请勿外传', * wid ...

  2. JS判断当前DOM树是否加载完毕

    /** * @function Monitor whether the document tree is loaded. * @param fn */function domReady(fn) { i ...

  3. BOM 浏览器对象模型_渲染引擎_JavaScript 引擎_网页加载流程

    1. 浏览器核心的两个组成部分 渲染引擎 将网页代码渲染为用户视觉可以感知的平面文档 分类: Firefox        Gecko 引擎 Safari        WebKit 引擎 Chrom ...

  4. python 爬取世纪佳缘,经过js渲染过的网页的爬取

    #!/usr/bin/python #-*- coding:utf-8 -*- #爬取世纪佳缘 #这个网站是真的烦,刚开始的时候用scrapy框架写,但是因为刚接触框架,碰到js渲染的页面之后就没办法 ...

  5. java_爬虫_获取经过js渲染后的网页源码

    md 弄了一天了……(这个月不会在摸爬虫了,浪费生命) 进入正题: 起初是想写一个爬虫来爬一个网站的视频,但是怎么爬取都爬取不到,分析了下源代码之后,发现源代码中并没有视频的dom 但是在浏览器检查元 ...

  6. 网页加载速度优化2--先加载css，然后再加载js文件。

    网页加载时,是按从上到下,从左到右的顺序加载的.所以一定要先加载css文件(不要让用户看到一个杂乱无章的页面),最后再加载js文件,js一般都是处理功能的,所以不需要提前加载.先给用户观感,再给用户上 ...

  7. 关于js渲染网页时爬取数据的思路和全过程（附源码）

    于js渲染网页时爬取数据的思路 首先可以先去用requests库访问url来测试一下能不能拿到数据,如果能拿到那么就是一个普通的网页,如果出现403类的错误代码可以在requests.get()方法里 ...

  8. 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...

  9. 《转》如何让你的网页加载时间降低到 1s 内

    当初分析了定宽高值和定宽高比这两种常见的图片延迟加载场景,也介绍了他们的应对方案,还做了一点技术选型的工作. 经过一段时间的项目实践,在先前方案的基础上又做了很多深入的优化工作.最终将好奇心日报的网页 ...

随机推荐

  1. 【记录】ajax跨域问题jsonp正确的使用方式

    最近遇到ajax请求跨域问题,解决方案用jsonp,现记录如下: //跨域请求jsonp封装 function doJsonPostCallBack(type, url, data,async, ca ...

  2. RK3288编译 Android 5.1 固件

    1 准备工作 编译 Android 对机器的配置要求较高: 64 位 CPU 16GB 物理内存+交换内存 30GB 空闲的磁盘空间用于构建,源码树另外占用大约 25GB Ubuntu 14.04 操 ...

  3. 解决Zookeeper报错:conf is not executed because it is not in the whitelist的解决办法

    1.echo wchp | nc localhost 2181 ,通过路径列出服务器 watch 的详细信息,且它会输出一个与 session 相关的路径.但是出现下面的错误. [root@xg61 ...

  4. Python的历史及介绍

    Python的诞生 Python的创始人吉多·范罗苏姆(Guido van Rossum),在1989年12月的圣诞节期间,为了打发时间,决定开发一种新的脚本解释程序,作为ABC语言的继承. 现在,p ...

  5. 【leetcode】954. Array of Doubled Pairs

    题目如下: Given an array of integers A with even length, return true if and only if it is possible to re ...

  6. C/C++ 智能指针线程池

    //这个线程池存在一定的BUG 如果没有多线程编程基础的先生请谨慎使用 //我放弃了这种模板方式的线程池,最好不要使用!!!!!!! ThreadPool.h { #ifndef __THREADPO ...

  7. UnixBench算分介绍

    关于如何用UnixBench,介绍文章很多,这里就不展开了.这里重点描述下它是如何算分的. 运行参数 碰到很多客户,装好后,直接./Run,就把结果跑出来了,然后还只取最后一个分值,比谁高谁低.下面列 ...

  8. NX二次开发CreateDialog函数在UI.hxx文件和WinUser.h中的冲突【转载】

    文章出自https://blog.csdn.net/qq_41843732/article/details/91422764 在UG二次开发中,若使用MFC库,一旦加上#include<Afx. ...

  9. php开发面试题---php高级程序员需要掌握的一些知识

    php开发面试题---php高级程序员需要掌握的一些知识 一.总结 一句话总结: 还是需要多多接触架构师的知识,比如这里说的微服务,还有需要php服务端的知识来解决web端的不足,比如Swoole 1 ...

  10. MySql在建立索引优化时需要注意的问题

    MySql在建立索引优化时需要注意的问题 设计好MySql的索引可以让你的数据库飞起来,大大的提高数据库效率.设计MySql索引的时候有一下几点注意: 1,创建索引 对于查询占主要的应用来说,索引显得 ...