通过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 相关文章推荐
解javascript 混淆加密收藏
Jan 16 Javascript
javascript 显示当前系统时间代码
Dec 28 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
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中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP7内核之Reference详解
2019/03/14 PHP
jquery键盘事件介绍
2011/01/31 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
python实现哈希表
2014/02/07 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
python机器学习实现决策树
2019/11/11 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
高中自我评价分享
2013/12/05 职场文书
高级销售求职信
2014/02/21 职场文书
银行贷款收入证明
2014/10/17 职场文书
家长学校教学计划
2015/01/19 职场文书
端午节寄语2015
2015/03/23 职场文书
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python