Javascript 网页水印实现代码_javascript技巧_脚本之家

  1. 支持IE678浏览器。暂不酌量别的浏览器。 1.3 效果图 加密前:

能够展开附属类小零部件里的公文进行查看。 2 完成步骤 2.1 基本寻思加密的长河是二个Javascript函数推行进度,所以大家率先应该构思用Javascript操作DOM对象的法子。
在本来就有的HTML页面中,新建二个DOM对象在Body节点下。该目的的长、宽均经过计量,有限帮衬在覆盖全体页面内容的还要又不产生滚动条。将该目的覆盖到原有的页面之上,设置背景图,并设置为透明。
成立新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(State of Qatar函数,则对之进行修正。
2.3 最终代码 思考到框架页面要求考虑的情景,该措施包蕴多个参数:
目的页面临象、目的页面字符串、 背景图片。 复制代码 代码如下: function
GetWaterMarked(targetObj,jpgUrl,targetStr 卡塔尔 { var windowobj=targetObj;
var waterMarkPicUrl=jpgUrl; var controlWindowStr=targetStr;
if(windowobj.document.getElementById return; var m = “water马克”; var
newMark = windowobj.document.createElement; newMark.id = m;
newMark.style.position = “absolute”; newMark.style.zIndex = “9527”;
newMark.style.top = “0px”; new马克.style.left = “0px”;
newMark.style.width = windowobj.document.body.clientWidth; if(
parseInt(windowobj.document.body.scrollHeight卡塔尔 >
parseInt(windowobj.document.body.clientHeightState of Qatar 卡塔尔国 { newMark.style.height
= windowobj.document.body.scrollHeight; }else { newMark.style.height =
windowobj.document.body.clientHeight; } newMark.style.backgroundImage =
“url(“+ waterMarkPicUrl +”State of Qatar”; new马克.style.filter = “阿尔法”;
windowobj.document.body.appendChild; var markStr = “var sobj
=”+controlWindowStr+”.document.getElementById;sobj.style.width
=”+controlWindowStr+”.document.body.clientWidth;sobj.style.height
=”+controlWindowStr+”.document.body.clientHeight;”;
if(windowobj.document.body.onresize != nullState of Qatar { var oldResiae =
windowobj.document.body.onresize.toString(卡塔尔国; var oldResiaeStr =
oldResiae.substr(oldResiae.indexOf; var oldResiaeStr=
oldResiaeStr.substr(0,oldResiaeStr.lastIndexOf;
oldResiaeStr+=”;”+markStr; windowobj.document.body.onresize = new
Function; } else { windowobj.document.body.onresize = new Function; } }
3 原有页面管理 供给在原本的

1 概述 1.1 定义
在生机勃勃部分B/S构造的应用类别中,有许多页面是急需有水印的。见惯不惊的就是文本系统、左券系统等。我们平常关切的是网址图片扩展水印,而超级少关心页面水印。刚去Google了意气风发圈,关于页面水印的稿子的数码为大概为0.
本文中,流牛木马就与大家同盟调换一下有关制作网页水印的体验。
本文切磋以下的景色:
新扩大水印的办法须要用Javascript完毕,并供给能够方便地插足到原始的页面中,不能够影响到已部分职能。
1.2 预期指标 就图片水印完毕方案以来,大家预料起码包含以下多少个目的: 1.
贯彻悬浮、半透明的图纸水印 2. 蕴涵水印的页面,全部因素均为只读 3.
在含有框架页面中,能够调节任性一个子页面或父页面包车型客车水印生成 4.
在页面放大、减少后,供给在确定保障页面不刷新的前提下,重新生成适应页面大小的新水印,以保障具有内容都被水印覆盖,並且不会因水印图片范围过大而发出滚动条。

标签处参加一个onload方法。如: 4 附属类小零部件 演示地址

加密后:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图