通过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 仿QQ滑动菜单效果代码
Sep 03 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
JavaScript中严格判断NaN的方法
Feb 16 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
JavaScript中Object、map、weakmap的区别分析
Dec 15 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实现数字补零功能的2个函数介绍
2014/05/12 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
HTML Dom与Css控制方法
2010/10/25 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
python线程池的实现实例
2013/11/18 Python
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
体育比赛口号
2014/06/09 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
留学推荐信英文范文
2015/03/26 职场文书
2015年中学团委工作总结
2015/07/22 职场文书