js添加背景水印
<!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>
如果需要全部都添加水印，建议用这个盒子包裹起来
</div>
<script src="jquery-1.12.4.js"></script> //记得引入你的jQuery路径
<script>
function watermark(settings) {
//默认设置
var defaultSettings = {
watermark_txt: "text",
watermark_x: 20,//水印起始位置x轴坐标
watermark_y: 20,//水印起始位置Y轴坐标
watermark_rows: 20,//水印行数
watermark_cols: 20,//水印列数
watermark_x_space: 100,//水印x轴间隔
watermark_y_space: 50,//水印y轴间隔
watermark_color: ‘#aaa‘,//水印字体颜色
watermark_alpha: 0.4,//水印透明度
watermark_fontsize: ‘15px‘,//水印字体大小
watermark_font: ‘微软雅黑‘,//水印字体
watermark_width: 180,//水印宽度
watermark_height: 100,//水印长度
watermark_angle: 15//水印倾斜度数
};
//采用配置项替换默认值，作用类似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();
//获取页面最大宽度
var page_width = Math.max(document.body.scrollWidth, document.body.clientWidth);
var cutWidth = page_width * 0.0150;
var page_width = page_width - cutWidth;
//获取页面最大高度
var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight) + 450;
// var page_height = document.body.scrollHeight+document.body.scrollTop;
//如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
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));
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/40224.html
- 上一篇：js三种存储方式区别
- 下一篇：VUE.js devtool 安装简易教程（转）
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")