![]() |
当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > javascript > 正文 |
|
|||
强烈推荐纯js实现网页水印效果很帅 | |||
2010-3-2 9:11:21 文/佚名 出处:cnblogs | |||
1 概述1.1 定义
1.2 预期目标
1.3 效果图 加密前:
加密后:
可以打开附件里的文件进行查看。 2 实现步骤2.1 基本构思
创建新DOM元素: 使用document对象里的createElement方法。创建元素后,设置它的z-index为一个大整数,保证它能够比已有网页的最大z-index大,才能完成“覆盖”。 计算新对象大小: 利用三个DOM对象值: clientWidth 、scrollHeight与clientHeight. 网页中一般不会出现横向滚动条,故不使用scrollWidth. 而纵向的滚动条就很常见了。 为了保证页面内容全部覆盖,在未出现滚动条的时候,使用clientHeight,出现滚动条后,则使用scrollHeight。
设置透明: 利用Alpha值。Alpha是IE支持的css filter。 2.2 应变细节 有一个小细节是很有意思的,前文也提过了,就是resize的过程。 试想,当一个页面打开的时候是550px×400px,那么自然会生成550px×400px大小的水印。但当用户对它进行最大化时,页面没有刷新,不会重新执行生成水印的函数,那么以前生产的水印图片就太小了。 如下图所示的情况。请注意,它的右侧、下侧都是没有水印的。
为了应对这种情况,我们就需要对body的onresize()函数进行处理。如果以前定义没有onresize()函数,则直接添加onresize();如果以前有onresize()函数,则对之进行修改。 2.3 最终代码 考虑到框架页面需要考虑的情况,该方法包括三个参数: 目标页面对象、目标页面字符串、 背景图片。 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; newMark.style.position = "absolute"; newMark.style.zIndex = "9527"; newMark.style.top = "0px"; newMark.style.left = "0px"; 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; } newMark.style.backgroundImage = "url("+ waterMarkPicUrl +")"; newMark.style.filter = "alpha(opacity=50)"; 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); } } 3 原有页面处理需要在原有的<body>标签处加入一个onload方法。如: <body onload="GetWaterMarked(window,'watermark.jpg','this')"> 4 附件http://files.cnblogs.com/azure/%E6%B0%B4%E5%8D%B0.rar |
|||
关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 | |
Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号 |