Skip to content

Instantly share code, notes, and snippets.

@ufologist
Created July 9, 2019 07:37
Show Gist options
  • Save ufologist/78d064c8e2ff76d962ae4311ed50ad22 to your computer and use it in GitHub Desktop.
Save ufologist/78d064c8e2ff76d962ae4311ed50ad22 to your computer and use it in GitHub Desktop.
简易水印
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简易水印</title>
<style>
html,
body {
height: 100%;
margin: 0;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<iframe src="https://baidu.com"></iframe>
<script>
(function() {
/**
* 添加全屏水印
*
* @param {string} text 水印文字
* @see https://musicfe.cn/page/15
*/
function appendFullPageMask(text) {
// 水印样式
var maskStyle = 'position:fixed;top:0;left:0;right:0;font-size:0;pointer-events:none;';
var maskContentStyle = 'display:inline-block;width:20%;margin-bottom:80px;font-size:12px;color:#aaa;transform:rotate(-30deg);';
// 水印容器元素
var maskEl = document.createElement('div');
maskEl.setAttribute('style', maskStyle);
// 水印内容元素
var maskContent = document.createElement('span');
maskContent.setAttribute('style', maskContentStyle);
maskContent.appendChild(document.createTextNode(text));
maskEl.appendChild(maskContent);
// 计算需要多少个水印内容才能铺满整屏
var count = 0;
document.body.appendChild(maskEl);
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
// 注意这里是非准确计算
var maskContentWidth = maskContent.getBoundingClientRect().width;
var maskContentHeight = maskContent.getBoundingClientRect().height;
var col = Math.floor(windowWidth / maskContentWidth);
var row = Math.ceil(windowHeight / maskContentHeight);
count = col * row;
document.body.removeChild(maskEl);
maskEl.removeChild(maskContent);
// 添加水印内容
for (var i = 0; i < count; i++) {
var maskContent = document.createElement('span');
maskContent.setAttribute('style', maskContentStyle);
maskContent.appendChild(document.createTextNode(text));
maskEl.appendChild(maskContent);
}
document.body.appendChild(maskEl);
}
appendFullPageMask('帐号水印');
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment