通过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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
js密码强度检测
Jan 07 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 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 版获取重定向后的地址(代码)
2013/06/26 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
javascript this详细介绍
2016/09/19 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
vue中axios封装使用的完整教程
2021/03/03 Vue.js
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Django框架封装外部函数示例
2019/05/28 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
python生成任意频率正弦波方式
2020/02/25 Python
python3排序的实例方法
2020/10/20 Python
python re.match()用法相关示例
2021/01/27 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
Java模拟试题
2014/11/10 面试题
90后毕业生的求职信范文
2013/09/21 职场文书
师德模范事迹材料
2014/06/03 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android