1.基本原理

  1. 页面加载后,通过javascript创建页面元素div,并在div元素中创建文本节点,展示水印内容
  2. 设置div元素样式,将其zIndex设置一个较高的值,并设置透明度,实现浮在页面的水印效果

其核心逻辑如下所示

 var mask_div = document.createElement('div');
mask_div.id = 'mask_div1';
mask_div.appendChild(document.createTextNode("test"));
mask_div.style.position = "absolute";
mask_div.style.left = '20px';
mask_div.style.top = '20px';
mask_div.style.overflow = "hidden";
mask_div.style.zIndex = "";
mask_div.style.opacity = 0.3;
  document.body.appendChild(mask_div);

2.继续完善

上述示例只在页面某处展示了一个水印,实际应用中往往需要在页面中铺满水印

在满足这种需求同时,下述代码将各种属性以配置方式提供给使用者,可根据需要灵活调用

function watermark(settings) {

    //默认设置
var defaultSettings={
watermark_txt:"text",
watermark_x:,//水印起始位置x轴坐标
watermark_y:,//水印起始位置Y轴坐标
watermark_rows:,//水印行数
watermark_cols:,//水印列数
watermark_x_space:,//水印x轴间隔
watermark_y_space:,//水印y轴间隔
watermark_color:'#000000',//水印字体颜色
watermark_alpha:0.3,//水印透明度
watermark_fontsize:'18px',//水印字体大小
watermark_font:'微软雅黑',//水印字体
watermark_width:,//水印宽度
watermark_height:,//水印长度
watermark_angle://水印倾斜度数
};
//采用配置项替换默认值,作用类似jquery.extend
if(arguments.length===&&typeof arguments[] ==="object" )
{
var src=arguments[]||{};
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(); //获取页面最大宽度
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 == ||
    (parseInt(defaultSettings.watermark_x
    + defaultSettings.watermark_width *defaultSettings.watermark_cols
    + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - ))
    > 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 - ));
}
//如果将水印行数设置为0,或水印行数设置过大,超过页面最大长度,则重新计算水印行数和水印y轴间隔
if (defaultSettings.watermark_rows == ||
    (parseInt(defaultSettings.watermark_y
    + defaultSettings.watermark_height * defaultSettings.watermark_rows
    + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - ))
    > 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 - ));
}
var x;
var y;
for (var i = ; i < defaultSettings.watermark_rows; i++) {
y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
for (var j = ; 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 = "";
//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);
}

3.调用方式

watermark({ watermark_txt: "测试水印" })//传入动态水印内容

//onload时触发水印绘制
window.onload=function(){
watermark({ watermark_txt: "测试水印" });
}; //onresize时触发水印绘制
window.onresize = function () {
watermark({ watermark_txt: "测试水印",watermark_width: })
};

4.页面效果

用JavaScript实现网页动态水印的更多相关文章

  1. iOS中动态注入JavaScript方法。动态给html标签添加事件

    项目中有这样一种需求,给html5网页中图片添加点击事件,并且弹出弹出点击的对应的图片,并且可以保持图片到本地 应对这样的需求你可能会想到很多方法来实现. 1. 最简单的方法就是在html5中添加图片 ...

  2. html dom与javascript的关系 -我们用JavaScript对网页(HTML)进行的所有操作都是通过DOM进行的

    一,什么是DOM (参考源http://www.cnblogs.com/chaogex/p/3959723.html) DOM是什么 DOM全称为The Document Object Model,应 ...

  3. JavaScript交互式网页设计作业目录(作业笔记)

    JavaScript交互式网页设计笔记 • [目录] 我的大学笔记>>> 第1章 JavaScript基本语法>>> 1.1.4 使用 JavaScript 的 H ...

  4. 深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap

    × 目录 [1]NodeList [2]HTMLCollection [3]NamedNodeMap[4]注意事项 前面的话 一说起动态集合,多数人可能都有所了解.但是,如果再深入些,有哪些动态集合, ...

  5. [JS]jQuery,javascript获得网页的高度和宽度

    [JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...

  6. 将JavaScript 插入网页的方法

    将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的. ...

  7. JavaScript实现网页背景自动变色

    JavaScript实现网页背景自动变色,自己变换颜色,设定时间和颜色值即可,在你设定的颜色值.一定时间内自动切换网页背景颜色. <!DOCTYPE HTML PUBLIC "-//W ...

  8. JQuery或JavaScript获取网页的宽度、高等

    最近多次使用JQery或JavaScript获取网页的宽度或者高度,在网上搜索N久之后发现很多都是粘贴上去并没有详细的介绍,这里我将会对经常使用的一些获取页面宽高的属性,方法做详细的介绍,以便能够更加 ...

  9. 网页动态切换母版页(MasterPage)

    原文:网页动态切换母版页(MasterPage) 是否可以变更网页的母版页(MasterPage)呢?某.aspx在创建时,已经附加入某一母版页(MasterPage)了,现需要.aspx动态变更母版 ...

随机推荐

  1. 动态规划-hdoj-4832-百度之星2014初赛第二场

    Chess Problem Description 小度和小良近期又迷上了下棋.棋盘一共同拥有N行M列,我们能够把左上角的格子定为(1,1),右下角的格子定为(N,M).在他们的规则中,"王 ...

  2. SDUT Fermat’s Chirstmas Theorem(素数筛)

    Fermat's Chirstmas Theorem Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述 In a letter ...

  3. 混淆器:java程序保护如何知识产权,特别提供一个java 开发的java 源代码级的混淆器

    java程序保护如何知识产权,特别提供一个java 开发的java 源代码级的混淆器 下载地址:http://yunpan.cn/QXhEcGNYLgwTD 运行方式:java -jar Encryp ...

  4. uva 1415 - Gauss Prime(高斯素数)

    题目链接:uva 1415 - Gauss Prime 题目大意:给出一个a,b,表示高斯数a+bi(i=−2‾‾‾√,推断该数是否为高斯素数. 解题思路: a = 0 时.肯定不是高斯素数 a != ...

  5. svn自动备份

    #!/bin/sh PATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin:~/bin export PATH DATE=` ...

  6. CentOS 如何修改mysql 用户root的密码

    源地址:http://blog.sina.com.cn/s/blog_6756f85201019zv7.html 第一步:用帐号登录mysql[root@CentOs5 ~]# mysql -u ro ...

  7. 同一个页面里的JS怎样获取jsp从别的页面获取的参数

    <html><from name="from1"><input=hidden name="myhidden" value=< ...

  8. Delphi中编写无输出函数名的DLL文件(有点意思)(400多篇博客)

    用 Delphi 用长了,总是发现,有些和 MS 不同的地方.例如,MS 的公开库中,常常隐藏了许多重要函数,这些函数在系统中常常有起着非常巨大的作用.一旦知道如何调用,可以给自己的应用程序提供很强的 ...

  9. PHP网站安装程序的原理及代码

    原文:PHP网站安装程序的原理及代码 原理: 其实PHP程序的安装原理无非就是将数据库结构和内容导入到相应的数据库中,从这个过程中重新配置连接数据库的参数和文件,为了保证不被别人恶意使用安装文件,当安 ...

  10. 最短路径算法-Dijkstra算法的应用之单词转换(词梯问题)(转)

    一,问题描述 在英文单词表中,有一些单词非常相似,它们可以通过只变换一个字符而得到另一个单词.比如:hive-->five:wine-->line:line-->nine:nine- ...