通过js给网页加上水印背景实例


Posted in Javascript onJune 17, 2019

水印方法

export function watermark(settings) {
//默认设置
let 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:210,//水印宽度
watermark_height:80,//水印长度
watermark_angle:15//水印倾斜度数
};
Object.assign(defaultSettings, settings);
let oTemp = document.createDocumentFragment();
//获取页面最大宽度
let p_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
let cutWidth = p_width*0.0150;
let page_width=p_width-cutWidth;
//获取页面最大高度
let page_height = Math.max(document.body.scrollHeight,document.body.clientHeight)+450;
// let 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));
defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
}
//如果将水印行数设置为0,或水印行数设置过大,超过页面最大长度,则重新计算水印行数和水印y轴间隔
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));
}
let x;
let y;
for (let i = 0; i < defaultSettings.watermark_rows; i++) {
y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
for (let j = 0; j < defaultSettings.watermark_cols; j++) {
x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
let 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));
//设置水印div倾斜显示
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 让水印不遮挡页面的点击事件
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);
}

使用方法

import { watermark } from './../common/watermark';
watermark({watermark_txt: '你要添加的水印'});

效果演示

通过js给网页加上水印背景实例

源码地址

https://github.com/artdong/antd-admin

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery表单验证使用插件formValidator
Nov 10 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
JS数组方法reduce的用法实例分析
Mar 03 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 #Javascript
通过实例解析js简易模块加载器
Jun 17 #Javascript
如何从头实现一个node.js的koa框架
Jun 17 #Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 #Javascript
深入解析koa之异步回调处理
Jun 17 #Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 #Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 #Javascript
You might like
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
js html实现计算器功能
2018/11/13 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
python基于socket实现网络广播的方法
2015/04/29 Python
python解析基于xml格式的日志文件
2017/02/25 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
python按照多个条件排序的方法
2019/02/08 Python
Python常见的pandas用法demo示例
2019/03/16 Python
Python3离线安装Requests模块问题
2019/10/13 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
心得体会的写法
2014/09/05 职场文书
2014年库房工作总结
2014/11/26 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
导游词400字
2015/02/13 职场文书
python如何将mat文件转为png
2022/07/15 Python