近期遇到一个需求,需要在页面背景加上自己的水印和禁止用户在页面复制粘贴
解决:
水印使用的是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; }
结束