JS加水印遮罩-CSDN博客

<%@ 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);
        }
 }