需求
- 页面背景加上水印
- 禁止用户在页面复制粘贴
水印
实现
水印使用的是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;
}
结束