<%@ page language="java" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <title>悬浮水印</title>

        <meta http-equiv="pragma" content="no-cache">

        <meta http-equiv="cache-control" content="no-cache">

        <meta http-equiv="expires" content="0">

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="This is my page">

        <script type="text/javascript" src="watermark.js"></script>

    </head>

    <body onload="GetWaterMarked(window,'watermark.jpg','this')">

        <div><font size="7">

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        This is a test.<br>

        </font></div>

    </body>

</html>
function GetWaterMarked(targetObj,jpgUrl,targetStr ) {

        var windowobj=targetObj;

        var waterMarkPicUrl=jpgUrl;

        var controlWindowStr=targetStr;

        if(windowobj.document.getElementById("waterMark") != null)

            return;

        var m = "waterMark";

        var newMark = windowobj.document.createElement("div");

        newMark.id = m;

        //定义div绝对位置

        newMark.style.position = "absolute";

        newMark.style.top = "0px";

        newMark.style.left = "0px";

        //设置div堆叠顺序，若为正数，则离用户更近，为负，数则表示离用户更远

        newMark.style.zIndex = "99999";

        //使用浏览器宽

        newMark.style.width = windowobj.document.body.clientWidth;

        //页面实际长度(不显示竖向滚动条)>浏览器长

        if( parseInt(windowobj.document.body.scrollHeight) > parseInt(windowobj.document.body.clientHeight) ){

            newMark.style.height = windowobj.document.body.scrollHeight;

        }else{

            newMark.style.height = windowobj.document.body.clientHeight;

        }

        //使用水印图片设为div背景

        newMark.style.backgroundImage = "url("+ waterMarkPicUrl +")";

        //透明样式

        newMark.style.filter = "alpha(opacity=20)";

        //加入div

        windowobj.document.body.appendChild(newMark);

        var markStr = "var sobj ="+controlWindowStr+".document.getElementById('waterMark');sobj.style.width ="+controlWindowStr+".document.body.clientWidth;sobj.style.height ="+controlWindowStr+".document.body.clientHeight;";

        if(windowobj.document.body.onresize != null){

            var oldResiae = windowobj.document.body.onresize.toString();

             var oldResiaeStr = oldResiae.substr(oldResiae.indexOf("{")+1);

             var oldResiaeStr= oldResiaeStr.substr(0,oldResiaeStr.lastIndexOf("}"));

             oldResiaeStr+=";"+markStr;

             windowobj.document.body.onresize = new Function(oldResiaeStr);

        }else{

            windowobj.document.body.onresize = new Function(markStr);

        }

 }

JS加水印遮罩的更多相关文章

  1. 由于开发需求需要在附件查看页面添加水印，于是网上看到一位大牛写了一个js加水印的方法觉得很实用，也很方便，记录一下，哈哈

    大牛的博客链接:https://www.cnblogs.com/daixinyu/p/6715398.html 提供给大家学习 我优化了几点 1,我把水印的样式单独提出来,这样会提高渲染水印的性能 2 ...

  2. 用node.js给图片加水印

    一.准备工作: 首先,确保你本地已经安装好了node环境.然后,我们进行图像编辑操作需要用到一个Node.js的库:images.这个库的地址是:https://github.com/zhangyua ...

  3. 如何用node.js批量给图片加水印

    上一篇我们讲了如何用node.js给图片加水印,但是只是给某一张图片加,并没有涉及到批量处理.这一篇,我们学习如果批量进行图片加水印处理. 一.准备工作: 首先,你要阅读完这篇文章:http://ww ...

  4. Html加水印和禁用复制和右键（jquery.watermark.js）

    近期遇到一个需求,需要在页面背景加上自己的水印和禁止用户在页面复制粘贴 解决: 水印使用的是jquery.watermark.js插件,这个插件可以在html背景上加水印,同时可以设置相关属性值. 相 ...

  5. 使用Node.js给图片加水印的方法

    一.准备工作: 首先,确保你本地已经安装好了node环境. 然后,我们进行图像编辑操作需要用到一个Node.js的库:images. 这个库的地址是:https://github.com/zhangy ...

  6. Web 上传图片加水印

    上传图片加水印 需要使用控件FileUpload 上传按钮Image控件展示上传的图片,页面中拖入三个控件 <form id="form1" runat="serv ...

  7. 使用iText对pdf做权限的操作（不允许修改，不允许复制，不允许另存为），并且加水印等

    添加水印,并且增加权限 @Test public void addWaterMark() throws Exception{ String srcFile="D:\\work\\pdf\\w ...

  8. c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合，找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理（完全指北）

    c#封装DBHelper类   public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...

  9. vue + canvas 图片加水印

    思路:将两张图片绘制为一张 目标:输入的文字,绘制到图片上,简单实现图片水印 效果:输入的文字1: ‘你猜猜’ + 图片2 = 图片3(不要看清除水印的按钮,本人垃圾 没实现) 选择图片 html & ...

随机推荐

  1. IHTMLDocument2的所有成员、属性、方法、事件[转]

    原文发布时间为:2010-07-01 -- 来源于本人的百度文章 [由搬家工具导入] IHTMLDocument2 InterfaceGets information about the docume ...

  2. Accelerating Enum-Based Dictionaries with Generic EnumComparer

    原文发布时间为:2011-03-03 -- 来源于本人的百度文章 [由搬家工具导入] 文章：http://www.codeproject.com/KB/cs/EnumComparer.aspx 源码： ...

  3. Scrapy学习-22-扩展开发

    开发scrapy扩展 定义 扩展框架提供一个机制,使得你能将自定义功能绑定到Scrapy. 扩展只是正常的类,它们在Scrapy启动时被实例化.初始化   注意 实际上自定义扩展和spider中间件. ...

  4. Spring Boot学习——Spring Boot简介

    最近工作中需要使用到Spring Boot,但是以前工作中没有用到过Spring Boot,所以需要学习下Spring Boot.本系列笔记是笔者学习Spring Boot的笔记,有错误和不足之处,请 ...

  5. NYOJ 20.吝啬的国度-DFS+STL(vector保存上一节点)

    整理代码 吝啬的国度 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第 ...

  6. 洛谷 P1478 陶陶摘苹果（升级版）【贪心/结构体排序/可用01背包待补】

    [链接]:https://www.luogu.org/problemnew/show/P1478 题目描述 又是一年秋季时,陶陶家的苹果树结了n个果子.陶陶又跑去摘苹果,这次她有一个a公分的椅子.当他 ...

  7. Fiddler简介以及web抓包

    Fiddler简介以及web抓包 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.Fiddler简介简单来说,Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联 ...

  8. svn报“Previous operation has not finished; run 'cleanup' if it was interrupted”的错误

    -.叙述 今天需要更新接口文檔,所以就update了一下,結果報了如下錯誤:      Error : Previous operation has not finished; run 'cleanu ...

  9. Best Cow Fences

    题目描述 Farmer John's farm consists of a long row of N (1 <= N <= 100,000)fields. Each field cont ...

  10. 查看linux 系统 当前使用的网卡

    使用ifconfig命令查看到linux 系统有三个网卡 ,其实我只要其中一个启用就可以了,用什么命令查看或者切换网卡,或者停用掉其他两个网卡? watch cat /proc/net/dev 看下哪 ...