<!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>Document</title>
<style>
#userName {
width: 350px;
height: 100px;
}
</style>
</head>
<body>
<div id="userName">
If you need to add a watermark all, wrapped up with this suggestion box
</div>
<Script src = "jquery-1.12.4.js"> </ script> // remember to introduce your jQuery path
<script>
function watermark(settings) {
//default setting
var defaultSettings = {
watermark_txt: "text",
watermark_x: 20, // x coordinate start position of watermark
watermark_y: 20, // Y axis coordinates of the starting position of the watermark
watermark_rows: 20, // number of rows watermark
watermark_cols: 20, // number of columns watermark
watermark_x_space: 100, // x-axis spacing watermark
watermark_y_space: 50, // y-axis spacing watermark
watermark_color: '#aaa', // watermark font color
watermark_alpha: 0.4, // watermark transparency
watermark_fontsize: '15px', // watermark font size
watermark_font: 'Microsoft elegant black', // watermark font
watermark_width: 180, // width watermark
watermark_height: 100, // length watermark
watermark_angle: 15 // Number of inclination watermark
};
// use configuration item overrides the default value, a similar role jquery.extend
if (arguments.length === 1 && typeof arguments[0] === "object") {
var src = arguments[0] || {};
for (key in src) {
if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
continue;
else if (src[key])
defaultSettings[key] = src[key];
}
}
var oTemp = document.createDocumentFragment();
// Get the maximum width of the page
var page_width = Math.max(document.body.scrollWidth, document.body.clientWidth);
var cutWidth = page_width * 0.0150;
var page_width = page_width - cutWidth;
// Get page maximum height
var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight) + 450;
// var page_height = document.body.scrollHeight+document.body.scrollTop;
// if the number of columns of the watermark is set to 0, or the number of columns of the watermark is set too large, exceeding the maximum width of the page, then recalculate the watermark and the watermark columns spaced x-axis
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));
}
// If the number of rows the watermark is set to 0, or the number of rows watermark is set too large, exceeding the maximum length of the page, then recalculate the watermark and the watermark y-axis rows spaced
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));
}
var x;
var y;
for (var i = 0; i < defaultSettings.watermark_rows; i++) {
y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
for (var j = 0; j < defaultSettings.watermark_cols; j++) {
x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
var 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));
// set the watermark div tilt display
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 let watermark does not obscure the page click event
//mask_div.style.border="solid #eee 1px";
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);
}
var userName = $('#userName').val()
watermark ({watermark_txt: 'content to add to the background watermark' + userName})
</script>
</body>
</html>