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是一款功能相当强大的图象处理组件,用它可以轻松地做出 ...

随机推荐

利用shell脚本快速定位日志
我们平时查日志,在测试环境,日志文件只有几个的情况下,我们可以通过找时间接近的文件然后根据关键词定位报错位置,大不了都查一遍,这都可以忍受.但是在实际的生产环境下,服务器集群部署,每天的日志非常多非常 ...
java高并发系列 - 第5天:深入理解进程和线程
进程进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.程序是指令.数据及其组织形式的描述,进程是程序的实体. 进程具有的 ...
C# QRBarCode
1. install-package barcode -v 4.0.2.2; 2. using IronBarCode; class Program { static void Main(string ...
C# ICloneable,shallow clone,deep clone.
[Serializable] public class Person:ICloneable { public string Name { get; set; } public int Id { get ...
python基础(6):基本数据类型一（int、bool、str）
1. 基本数据类型 1. int ==> 整数,主要⽤来进⾏数学运算 2. str ==> 字符串,可以保存少量数据并进⾏相应的操作 3. bool==>判断真假,True,Fals ...
java基础(8):Eclipse开发工具
1. Eclipse开发工具 Eclipse是功能强大Java集成开发工具.它可以极大地提升我们的开发效率.可以自动编译,检查错误.在公司中,使用的就是Eclipse进行开发. 1.1 Eclipse ...
python中13个实用的文件操作
1. 判断指定目录是否存在: os.path.exists(input_folder) 2. 判断指定目录是不是文件夹 os.path.isdir(input_folder) 3. 判断指定目录是不是 ...
Java生鲜电商平台-SpringCloud微服务架构高并发参数优化实战
Java生鲜电商平台-SpringCloud微服务架构高并发参数优化实战一.写在前面在Java生鲜电商平台平台中相信不少朋友都在自己公司使用Spring Cloud框架来构建微服务架构,毕竟现在这 ...
DYNAMICS 365发布所有时候报错：appmodule With Id = a7a513b1-c87d-e911-a83a-000d3a375321 Does Not Exist
我是微软Dynamcis 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...
mysql设置用户密码规则
一.查看密码规则 SHOW VARIABLES LIKE 'validate_password%'; 二.规则显示介绍 | Variable_name | Value | +------------- ...

html-加水印--watermark--代码测试

html-加水印--watermark--代码测试的更多相关文章

随机推荐

热门专题