通过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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
JS常用跨域方法实现原理解析
Dec 09 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&amp;mysql(三)
2006/10/09 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
JS 强制设为首页的代码
2009/01/31 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
python scatter函数用法实例详解
2020/02/11 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
Python pymsql模块的使用
2020/09/07 Python
浅析Python requests 模块
2020/10/09 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
初一地理教学反思
2014/01/16 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
大专毕业生求职信
2014/07/05 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
婚礼新人答谢词
2015/01/04 职场文书