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是一款功能相当强大的图象处理组件,用它可以轻松地做出 ...
随机推荐
- 【LOJ#2507】[CEOI2011]Matching（KMP，树状数组）
[LOJ#2507][CEOI2011]Matching(KMP,树状数组) 题面 LOJ 题解 发现要做的是排名串的匹配. 然后我们考虑把它转成这个位置之前有多少个数小于当前这个数,这样子只要每个位 ...
- Spring5源码解析1-从启动容器开始
从启动容器开始 最简单的启动spring的代码如下: @Configuration @ComponentScan public class AppConfig { } public class Mai ...
- 机器学习常见的几种评价指标：精确率（Precision）、召回率（Recall）、F值（F-measure）、ROC曲线、AUC、准确率（Accuracy）
原文链接:https://blog.csdn.net/weixin_42518879/article/details/83959319 主要内容:机器学习中常见的几种评价指标,它们各自的含义和计算(注 ...
- 初始HTML_表格
Html表格 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- 【2019年版】如何向SAP公司提交Message？
[2019年版]如何向SAP公司提交Message? 1,浏览器里输入如下网址: ,出现如下界面, 2,点击 'Visit the SAP Support Portal' 按钮.进入如下界面,去菜单M ...
- switch...case...语句分析（大表跟小表何时产生）
一.switch...case...的格式 switch(表达式) { case 常量表达式1: 语句; break; case 常量表达式2: 语句; break; case 常量表达式3: 语句; ...
- Gatech OMSCS的申请和学习之奥妙
https://zhuanlan.zhihu.com/p/54680585 我写东西一向希望能给大家带来正能量,提供有价值的信息,不辱没母校的厚德价值观. 我是传统没落工科毕业后开发软件,但是一直没下 ...
- [b0006] Spark 2.0.1 伪分布式搭建练手
环境: 已经安装好: hadoop 2.6.4 yarn 参考: [b0001] 伪分布式 hadoop 2.6.4 准备: spark-2.0.1-bin-hadoop2.6.tgz 下载地址: ...
- Windows Cluster失败后,AlwaysOn在残存Server节点上快速恢复DB的详细步骤
AlwaysOn是一种集合了高可用和灾难恢复两种功能的技术,它支持一个或多个数据库整体的发生故障转移,它实现了一定程度上的负载均衡,减轻了主服务器的压力,是目前最好的一种选择.那么当极端情况发生时,集 ...
- mssql sqlserver sql脚本自动遍历重复生成指定表记录
摘要: 今天接到老板的需求,需根据一张表中列值,自动重复表中的数据行,然后显示给用户 实验环境:sqlserver 2008 R2 转自:http://www.maomao365.com/?p=841 ...