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是一款功能相当强大的图象处理组件,用它可以轻松地做出 ...
随机推荐
- 【raid级别】RAID级别工作模式
友情链接 磁盘分区,格式化,挂载,创建交换分区:https://www.cnblogs.com/HeiDi-BoKe/p/11936998.html RAID工作级别:https://www.cnbl ...
- Redis for OPS 04：主从复制
写在前面的话 Redis 的主从其实和 MySQL 类似,更多的还是作为备份的功能存在,在复杂的 Rediis 集群架构中,主从也是不可或缺的. 主从复制 主从复制原理: 1. 从库通过命令连接到主库 ...
- NGINX 配置清单
以下内容来自 SimulatedGREG/nginx-cheatsheet. 通用设置 端口 listen server { # standard HTTP protocol listen 80; # ...
- dictionary vs Hashtables
DictionaryDictionary is generic type Dictionary<TKey,TValue>Dictionary class is a strong type ...
- c#中list集合使用Max()方法查找到最大值
在C#的List集合操作中,有时候需要查找到List集合中的最大值,此时可以使用List集合的扩展方法Max方法,Max方法有2种形式,一种是不带任何参数的形式,适用于一些值类型变量的List集合,另 ...
- Python中执行系统命令的四种方法
一.os.system方法 在子终端运行系统命令,可以获取命令执行后的返回信息以及执行返回的状态.执行后返回两行结果,第一行是结果, 第二行是执行状态信息,如果命令成功执行,这条语句返回0,否则返回1 ...
- 不知道怎么向女神表白？Python三大神技分分钟带你成功逆袭！
一行python的表白 首先祭出绝招,用1行python表白: print(' '.join([''.join([('I LOVE U'[(x-y) % 8] if ( (x*0.05)**2 + ( ...
- 如何访问到静态的文件，如jpg,js,css.
如果你的DispatcherServlet拦截"*.do"这样的有后缀的URL,就不存在访问不到静态资源的问题. 如果你的DispatcherServlet拦截"/&qu ...
- php实现基础排序算法
<?php header("content-type:text/html;charset=utf-8"); $testArr = array(); $time1 = micr ...
- JAVA 基础篇
一.数组 1. 什么是数组? 数组和变量差不多,也是可以存放数据的,但是数组可以存放多个数据,而且多个数据的数据类型统一 格式 数据类型 [] 数组名称; 还有一种等效的写法,不推荐 数据类型 数组名 ...