Html加水印和禁用复制和右键(jquery.watermark.js)

近期遇到一个需求,需要在页面背景加上自己的水印和禁止用户在页面复制粘贴


 解决:

水印使用的是jquery.watermark.js插件,这个插件可以在html背景上加水印,同时可以设置相关属性值。

相关代码如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style type="text/css">
        body, html{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="http://code.jquery.com/jquery-git.js"></script>
    <script src="jquery.watermark.js"></script>
</head>
<body >
     <script type="text/javascript">
        $('body').watermark({
            texts : ["这是测试", "这是测试2"], //水印文字
            textColor : "#d2d2d2", //文字颜色
            textFont : '14px 微软雅黑', //字体
            width : 100, //水印文字的水平间距
            height : 100,  //水印文字的高度间距(低于文字高度会被替代)
            textRotate : -30 //-90到0, 负数值,不包含-90
        })
     </script>
</body>
</html>

 注意:这个插件需要在引用了jquery的基础上使用


 效果如下:


禁用复制和右键代码如下:

     //禁止复制和右键另存为
        function iEsc() { return false;}
        function iRec() { return true;}
        function DisableKeys() {
            if (event.ctrlKey || event.shiftKey || event.altKey) {
                window.event.returnValue = false;
                iEsc();
            }
        }
        document.ondragstart = iEsc;
        document.onkeydown = DisableKeys;
        document.oncontextmenu = iEsc;
        if (typeof document.onselectstart != "undefined")
            document.onselectstart = iEsc;
        else {
            document.onmousedown = iEsc;
            document.onmouseup = iRec;
        }

结束

猜你喜欢

转载自www.cnblogs.com/zktww/p/11399782.html