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. 【Python】Python 基础知识

    数字和表达式 >>> 2+3 5 >>> 1.0/2.0 0.5 >>> 1.0//2.0 # // 0.0 >>> 1%2 # ...

  2. 14.4.3.4 Configuring InnoDB Buffer Pool Prefetching (Read-Ahead) 配置InnoDB Buffer pool 预读

    14.4.3.4 Configuring InnoDB Buffer Pool Prefetching (Read-Ahead) 配置InnoDB Buffer pool 预读 一个预读请求 是一个I ...

  3. EXTJS4两个ComboBox的数据源联动,解决遇到第二个ComboBox第二次以后显示忙的状态问题

    定义如下[红色部分是后加上的,它是解决问题的关键]: var bu_store = Ext.create('Ext.data.Store', { fields: ['key', 'value'], r ...

  4. cocos2dx之lua项目开发中MVC框架的简单应用

    **************************************************************************** 时间:2015-03-31 作者:Sharin ...

  5. vim高级编辑(一)

    本文出自   http://blog.csdn.net/shuangde800 ------------------------------------------------------------ ...

  6. hprose rpc使用实例(同时有Java和Delphi客户端的例子)

    php server <?php require_once('src/Hprose.php'); function hello($name) { echo "Hello $name!& ...

  7. Ubuntu14.04搭建android开发环境

    一 下载ADT 官方下载地址:http://developer.android.com/sdk/index.html(须要FQ或者改动host) 二 解压 1 使用终端将下载的文件解压当前文件夹下: ...

  8. char数组和String互转

    char ch[100];string str; 把char*(c类型的string)数组转换为string:str = ch; //即可str.assign(ch); //也可 把string类型转 ...

  9. 解决windows下的mysql匿名登陆无法使用mysql数据库的问题

    原文:解决windows下的mysql匿名登陆无法使用mysql数据库的问题 我在windows下安装了mysql,但是不用密码就能登进去,而root明明是有密码的,我用select user()命令 ...

  10. [开源]C#二维码生成解析工具,可添加自定义Logo (转)

    二维码又称 QR Code,QR 全称 Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的 Bar Code 条形码能存更多的信息,也能表示更多的数据类型:比如:字 ...