html-加水印--watermark--代码测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>h002test-mask-demo</title>
<style type="text/css">
body {
border: 1px solid black;
margin: 5 auto;//
}
nav {
background-color: gray;
height: 30px;
padding-top: 3px;
}
header {
height: 70px;
width: 960px;
background-color: pink;
margin: 0 auto;
padding: 0 auto;
}
article {
height: 500px;
width: 800px;
margin: 0 auto;
background-color: LightGrey
;
float: left;
}
section {
width:960px;
height: 600px;
margin: 0 auto;
background-color: #AABBCC;
}
footer {
text-align: center;
} aside {
width: 120px;
height: 500px;
background-color: gray;
float:right;
margin: 0 auto;
} progress {
height: 30px; } </style>
</head>
<body> <header><p stype="text-align:center"><h3>这是头部</h3></p>
<nav align="center">
<a href="#">首页</a>
<a href="#">新闻</a>
<a href="#">图片</a>
<a href="#">关键字</a>
<a href="#">关键字</a>
<a href="#">关键字</a>
<a href="#">关键字</a>
<a href="#">关键字</a>
</nav>
</header>
<section class="container">区块1 111
<time>20100101</time>
<p>hello!这是一个段落</p>
<article>这是一篇文章，
<progress value="60" min="0" max="100"></progress>
123123，
123123<br>
123123<br>
123123<br>
123123<br>
123123<br>
123123<br>
123123<br>
123123<br>
<hr>
123123123zddd对对对</article>
<aside>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<a href="#">文章链接</a><br>
<div>
<audio src="http://www.xxx.com/73852.mp3" controls="false" autoplay="true" loop="3"></audio>
</div>
</aside>
</section> <footer>
<p>版权所有@test copyRight</p> </footer> <script>
function watermark(settings) { //默认设置
var 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:'#000000',//水印字体颜色
watermark_alpha:0.3,//水印透明度
watermark_fontsize:'18px',//水印字体大小
watermark_font:'微软雅黑',//水印字体
watermark_width:120,//水印宽度
watermark_height:80,//水印长度
watermark_angle:15//水印倾斜度数
};
//采用配置项替换默认值，作用类似jquery.extend
if(arguments.length===1&&typeof arguments[0] ==="object" )
{
var src=arguments[0]||{};
for(key in src)
{
if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key])
continue;
else if(src[key])
defaultSettings[key]=src[key];
}
} var oTemp = document.createDocumentFragment();
oTemp.id = 'mask_divtop';//zz=note设置ID
//获取页面最大宽度
var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
//获取页面最大长度
var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight); //如果将水印列数设置为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));
}
var x;
var y;
for (var i = 0; i < defaultSettings.watermark_rows; i++) {
y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
for (var j = 0; j < defaultSettings.watermark_cols; j++) {
x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j; var mask_div = document.createElement('div');
mask_div.id = 'mask_div' + i + j;
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";
//zz=note穿透
mask_div.style.pointerEvents="none";
// mask_div.style.border="solid #eee 1px";
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); } watermark({ watermark_txt: "测试水印" })//传入动态水印内容 //onload时触发水印绘制
window.onload=function(){
//zzynote 增加移除
var oclose=document.getElementById('mask_divtop');
document.body.removeChild(oclose);
watermark({ watermark_txt: "测试水印" });
};
//onresize时触发水印绘制
window.onresize = function () {
//zzynote 增加移除
var oclose=document.getElementById('mask_divtop');
document.body.removeChild(oclose);
watermark({ watermark_txt: "测试水印",watermark_width:50 })
};
</script>
</body>
</html>
效果图如下：
html-加水印--watermark--代码测试的更多相关文章
- QT使用QPainter加水印
QT使用QPainter加水印 加水印的代码 //为QPixmap添加水印 void MainWindow::addMask(QPixmap& pm, const QString& t ...
- Html加水印和禁用复制和右键（jquery.watermark.js）
近期遇到一个需求,需要在页面背景加上自己的水印和禁止用户在页面复制粘贴 解决: 水印使用的是jquery.watermark.js插件,这个插件可以在html背景上加水印,同时可以设置相关属性值. 相 ...
- PHP加水印代码 支持文字和图片水印
PHP加图片水印.文字水印类代码,PHP加水印类,支持文字图片水印的透明度设置.水印图片背景透明.自己写的一个类,因为自己开发的一套CMS中要用到,网上的总感觉用着不顺手,希望大家也喜欢这个类,后附有 ...
- springboot为导出的pdf和excel加水印
相信很多小伙伴们在做导出pdf或者excel文件时会被要求在文件上加上水印,本篇博客就来讲讲如何为pdf和excel加水印. 导出pdf加水印 其实在导出pdf时加上水印并不难,因为itext提供了添 ...
- c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合，找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理（完全指北）
c#封装DBHelper类 public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...
- Python练习册--PIL处理图片之加水印
背景 最近在看到了Python 练习册,每天一个小程序 这个项目,非常有趣,也比较实用. 晚上看了这第000题,关于Python图片处理: 将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似 ...
- java 实现 PDF 加水印功能
使用java代码实现给PDF加水印的功能 首先导入所需要的依赖 <dependency> <groupId>com.itextpdf</groupId> <a ...
- php对图片加水印--将文字作为水印加到图片
方法代码: /** * 图片加水印(适用于png/jpg/gif格式) * * @author flynetcn * * @param $srcImg 原图片 * @param $wat ...
- php对图片加水印--将一张图片作为水印加到另一张图片
代码如下: /** * 图片加水印(适用于png/jpg/gif格式) * * @param $srcImg 原图片 * @param $waterImg 水印图片 * @param $s ...
- ASP组件AspJpeg(加水印)生成缩略图等使用方法
ASP组件AspJpeg(加水印)生成缩略图等使用方法 作者: 字体:[增加 减小] 类型:转载 时间:2012-12-17我要评论 ASPJPEG是一款功能相当强大的图象处理组件,用它可以轻松地做出 ...
随机推荐
- selenium常用的三种等待方式
一.强制等待 使用方法:sleep(X),等待X秒后,进行下一步操作. 第一种也是使用最简单的一种办法就是强制等待sleep(X),强制让浏览器等待X秒,不管当前操作是否完成,是否可以进行下一步操作, ...
- 在windows实现nginx滚动日志
nginx自身并不能够切分或滚动日志,因此只能用一个bat脚本按天切割日志,并删除三天前的日志 @echo off rem nginx滚动日志 rem nginx工作目录 set workspace= ...
- SpringBoot中数据加密存储和获取后解密展示AttributeConverter的实现
1. 需求: 数据库存入数据的时候要加密处理,不同的字段加密方式不同. 界面上展示的时候要解密处理,解密方式相同. 2. 实现方案一: 定义公共的加密解密方法,然后在对应的字段上重写他的getset方 ...
- sequelize时间自动格式化
问题 每次查询datetime的字段,显示出来都是这种格式 2019-08-27T12:02:05.000Z 解决办法 初始化Sequelize的时候传入dialectOptions参数 let se ...
- [目录] -- 计划翻译一些有关CLR/C#的基础内容，希望能坚持下去
主要内容有以下部分(URL待补充): CLR 和Windows Loader 加载.NET Assembly的过程 CLR加载失败分析分析 Windows内存架构模型,分配内存及垃圾回收 其他带补充的 ...
- SmtpClient发送邮件时附件名称乱码
在用户环境发现一个现象,使用System.Net.Mail.SmtpClient发送邮件,当附件名包含中文且长度较长时,最终的邮件里附件名会乱掉,写个简单的测试程序: var mail = new M ...
- 5-API 网关 kong 实战
原文:https://cloud.tencent.com/developer/article/1477672 1. 什么是Kong? 目前互联网后台架构一般是采用微服务,或者类似微服务的形式,应用的请 ...
- C#中对文件进行选择对话框打开和保存对话框进行复制
场景 通过文件选择对话框选择文件 复制文件到指定路径 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教 ...
- vi 上下左右变ABCD乱码解决方法
CentOS echo "set nocompatible" >> ~/.vimrc source ~/.vimrc debian sudo apt-get remov ...
- cmd start命令启动文件的路径
最近在脚本中通过WScript.Shell执行命令行,实现IE打开Chrome的功能. JS代码如下: var singleurl = window.location.href; var isChro ...