js网页加水印

主要是这个属性的应用 pointer-events: none有如下配置:

var config = {
    tw: 300, //单个水印内容高度            
    th: 150, //单个水印内容宽度         
    c: 80 // 为了避免页面下方有多余的空白, 少显示一行, 所以在计算每个水印高度的时候 需要增加像素,一般为内容高度的一半即可   
}
<!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: "https://雨夜技术资源网.中国",
            day: "20220701"
        }
        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>

 

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0
评论 抢沙发

请登录后发表评论

    暂无评论内容