<!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>js页面水印</title>
<style>
body {
overflow-x: hidden;
}
.table-sy {
width: 100%;
height: 100%;
position: absolute;
pointer-events: none;
/*主要是这个属性*/
color: #d2d6d9;
z-index: 99999999999;
}
.table-sy>div {
/*width: 300px;*/
/*height: 150px;*/
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-40deg);
float: left;
}
.content {
width: 100%;
height: 20vh;
text-align: center;
line-height: 20vh;
cursor: pointer;
}
</style>
</head>
<body>
<div id="sy" class="table-sy"></div>
<div>
<div class="content" onclick="alert(i++)">页面内容</div>
<div class="content" onclick="alert(i++)">页面内容</div>
<div class="content" onclick="alert(i++)">页面内容</div>
<div class="content" onclick="alert(i++)">页面内容</div>
<div class="content" onclick="alert(i++)">页面内容</div>
<div class="content" onclick="alert(i++)">页面内容</div>
<div class="content" onclick="alert(i++)">页面内容</div>
<div class="content" onclick="alert(i++)">页面内容</div>
</div>
</body>
<script>
var i = 0;
loadSy();
window.onresize = function () {
loadSy();
}
/**
* 页面添加水印
*/
function loadSy() {
var config = {
tw: 300, //内容高度
th: 150, // 内容宽度
c: 80 // 为了避免页面下方有多余的空白, 少显示一行。所以在计算每个水印高度的时候，需要加个差值，使水印分布的更均匀（一般为内容高度的一半即可）
}
var dom = document.getElementById("sy");
var data = {
name: "飞兔小哥",
code: "5201314",
day: "20220520"
}
var width = document.body.offsetWidth;
dom.style.width = width + "px";
var height = document.body.offsetHeight;
dom.style.height = height + "px";
var wnum = parseInt(width / config.tw) || 1;
var hnum = parseInt(height / config.th) || 1;
var wc = (width - wnum * config.tw) / wnum - 1 || 0;
var hc = (height - hnum * config.th + config.c) / hnum - 1 || 0;
var num = wnum * (hnum - 1);
var html = [];
for (var i = 0; i < num; i++) {
html.push('<div style="width: ' + (config.tw + wc) + 'px;height: ' + (config.th + hc) + 'px">', data.name, '<br/>', data.code, '<br/>', data.day, '</div>');
}
dom.innerHTML = html.join("");
}
</script>
</html>
网页加水印.rar （2个子文件） 
网页加水印 
使用必读.png 61KB
index.html 3KB资源评论
极客飞兔
- 粉丝: 5w+
- 资源: 203
会员权益专享
最新资源
- 基于Springboot智能热度分析和自媒体推送平台【毕业设计，源码】
- linklist.cpp
- SSA麻雀搜索算法优化长短期记忆神经网络(SSA-LSTM)回归预测（Matlab完整程序和数据）
- 技术篇-【Python可视化】基于Python的数据可视化（一）
- 全国统计用区划代码和城乡划分代码,全国省市县代码
- EPICSSNS-CSS-4.5.0-LINUX 32位版本 EPICS Control System Studio (CS
- Login.java
- 05FrameLayout.xml
- vs_Enterprise (3).exe
- STM32F103VET6单片机 基于SD卡数字相册(JPG)例程-5&7寸（SSD1963）LCD屏例程源码.rar
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
