页面添加水印效果实现

news/2024/7/11 0:57:16 标签: jQuery, javascript

页面效果:

在这里插入图片描述

源代码:

<div id="water-wrapper"></div>
<div>
    <div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
    <div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
    <div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
    <div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
    <div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>

jquery版本

javascript">function water() {
    const watermarkText = '不爱吃糖的程序媛'; // 水印文字内容
    const wrap = document.querySelector('#water-wrapper');
    const html = document.querySelector('html');
    const body = document.querySelector('body');
    html.style.margin = "0"
    html.style.padding = "0"
    body.style.margin = "0"
    body.style.padding = "0"
    wrap.style.width = "100vw"
    wrap.style.height = "100vh"
    wrap.style.display = "flex"
    wrap.style.position = "absolute"
    wrap.style.zIndex = "999999"
    wrap.style.flexDirection = "row"
    wrap.style.justifyContent = "space-around"
    wrap.style.flexWrap = "wrap"
    wrap.style.pointerEvents = "none"
    wrap.style.fontSize = "16px"
    wrap.style.color = "rgba(184, 184, 184, 0.6)"
    wrap.style.overflow = "hidden"

    const wrapWidth = wrap.offsetWidth; // 容器的宽度
    const wrapHeight = wrap.offsetHeight; // 容器的高度

    const tempSpan = document.createElement('span');
    tempSpan.innerText = watermarkText;
    tempSpan.style.visibility = 'hidden';
    document.body.appendChild(tempSpan);
    const watermarkWidth = tempSpan.getBoundingClientRect().width + 160; // 水印文本的实际宽度
    const watermarkHeight = tempSpan.getBoundingClientRect().height + 120; // 水印文本的实际高度
    document.body.removeChild(tempSpan);

    const numCols = Math.floor(wrapWidth / watermarkWidth); // 计算每行可容纳的方格数量
    const numRows = Math.floor(wrapHeight / watermarkHeight); // 计算可容纳的行数

    for (let i = 0; i < numRows; i++) {
        for (let j = 0; j < numCols; j++) {
            const watermark = document.createElement('div');
            watermark.classList.add('watermark');
            watermark.innerText = watermarkText;
            watermark.style.padding = "60px 80px"
            watermark.style.transform = "rotate(-45deg)"
            watermark.style.transformOrigin = "center center"
            wrap.appendChild(watermark);
        }
    }
}
water()

http://www.niftyadmin.cn/n/5219955.html

相关文章

关于fine-tune “微调”

大模型的 Fine-tune 我们对技术的理解&#xff0c;要比技术本身更加重要。 正如我在《大模型时代的应用创新范式》一文中所说&#xff0c;大模型会成为AI时代的一项基础设施。 作为像水、电一样的基础设施&#xff0c;预训练大模型这样的艰巨任务&#xff0c;只会有少数技术…

3.一维数组——输入十个数,输出其中最大(小)数

文章目录 前言一、题目描述 二、题目分析 三、解题 程序运行代码 前言 本系列为一维数组编程题&#xff0c;点滴成长&#xff0c;一起逆袭。 一、题目描述 输入十个数&#xff0c;输出其中最大&#xff08;小&#xff09;数 二、题目分析 打擂台法&#xff1a;maxa[0]; 最大…

OpenMesh 网格曲率计算

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 借鉴之前点云主曲率计算的思路(Matlab 点云主曲率计算),这里基于网格顶点中每个邻近顶点的法向量来计算出点云中每个顶点的主曲率值。 二、实现代码

Python实现WOA智能鲸鱼优化算法优化XGBoost分类模型(XGBClassifier算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 鲸鱼优化算法 (whale optimization algorithm,WOA)是 2016 年由澳大利亚格里菲斯大学的Mirjalili 等提…

计算机基础知识详细讲解

目录 一、计算机硬件 CPU&#xff08;中央处理器&#xff09;&#xff1a;负责执行计算机指令和处理数据。 内存&#xff08;RAM&#xff09;&#xff1a;用于临时存储程序和数据。 硬盘&#xff1a;用于永久性存储数据和文件。 显示器&#xff1a;用于显示图形界面和输出信…

C++ :const修饰成员函数

常函数&#xff1a; 常函数&#xff1a; 成员函数后加const后我们称为这个函数为常函数 常函数内不可以修改成员属性 成员属性声明时加关键字mutable后&#xff0c;在常函数中依然可以修改 属性可修改&#xff1a; class Person { public: void showPerson() …

vr红色教育虚拟展馆全景制作提升单位品牌形象

720全景展馆编辑平台以其独特的优势&#xff0c;为展览行业带来了革命性的变革。这种创新的技术应用为参展商提供了更高效、更便捷、更全面的展示解决方案&#xff0c;进一步提升了展览行业的水平和影响力。 一、提升展示效果&#xff0c;增强品牌形象 720全景展馆编辑平台通过…

shell脚本正则表达式

目录 一. 正则表达式定义 二. 基本正则表达式 1. 元字符 2. 表示次数 3. 位置锚定 4. 分组或其他 二. 拓展正则表达式 1. 表示次数 2. 表示分组 一. 正则表达式定义 正则表达式&#xff08;REGEXP &#xff09;&#xff1a;由一类特殊字符及文本字符所编写的模式&…