通过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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
JavaScript 继承详解(四)
Jul 13 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
vuex存值与取值的实例
Nov 06 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 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
python聊天程序实例代码分享
2013/11/18 Python
Python中的并发编程实例
2014/07/07 Python
Python中的魔法方法深入理解
2014/07/09 Python
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
商务日语毕业生自荐信
2013/11/23 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
宾馆安全管理制度
2015/08/06 职场文书
暑假生活随笔
2015/08/15 职场文书
超市主管竞聘书
2015/09/15 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
详解Python类和对象内容
2021/06/22 Python