近期遇到一個需求,需要在頁面背景加上自己的水印和禁止用戶在頁面復制粘貼
解決:
水印使用的是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; }
結束