当前位置:七道奇文章资讯设计学堂DW设计
日期:2012-09-08 23:39:00  来源:本站整理

利用Javascript实现网页水印(非图片水印)[DW设计]

赞助商链接



  本文“利用Javascript实现网页水印(非图片水印)[DW设计]”是由七道奇为您精心收集,来源于网络转载,文章版权归文章作者所有,本站不对其观点以及内容做任何评价,请读者自行判断,以下是其具体内容:

1 概述
1.1 定义

在一些B/S构造的利用系统中,有很多页面是需求有水印的.常见的就是公文系统、条约系统等.大家常常关注的是网站图片增添水印,而很少关注页面水印.刚去Google了一圈,关于页面水印的文章的数目为几近为0. 本文中,流牛木马就与大家一同交流一下有关制作网页水印的心得.

本文谈论以下的情形: 新增水印的办法需求用Javascript完成,并要求可以便利地加入到原有的页面中,不能影响到已有的功效.

1.2 预期目标

就图片水印实现筹划来说,我们预期至少包含以下几个目标:

1. 实现悬浮、半透明的图片水印

2. 包含水印的页面,全部元素均为只读(不可写)

3. 在包含框架页面中,可以掌握肆意一个子页面或父页面的水印生成

4. 在页面放大、缩小(resize历程)后,需求在保证页面不革新的前提下,重新生成适应页面大小的新水印,以保证全部内容都被水印覆盖,并且不会因水印图片范围过大而产生转动条.

5. 支持IE6\7\8浏览器.暂不考虑其他浏览器.

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();假如从前有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

_________________________________________________________________________________

关于扩大到非IE浏览器:

有很多朋友问起若何扩大到非IE浏览器.

我文中有提到设置水印图片透明的方法,那是一种仅实用于IE的方法.要在其他浏览器中的设置图片透明,也是很简单的. 我还没有做测试,请各位看官自行参考这篇帖子:

http://dancewithnet.com/2009/09/06/css-opacity/


  以上是“利用Javascript实现网页水印(非图片水印)[DW设计]”的内容,如果你对以上该文章内容感兴趣,你可以看看七道奇为您推荐以下文章:
  • 利用Javascript实现网页水印(非图片水印)
  • <b>如安在Oracle中利用Java存储历程</b>
  • 利用javascript获得浏览器中的星号密码办法
  • 本文地址: 与您的QQ/BBS好友分享!
    • 好的评价 如果您觉得此文章好,就请您
        0%(0)
    • 差的评价 如果您觉得此文章差,就请您
        100%(2)

    文章评论评论内容只代表网友观点,与本站立场无关!

       评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论
    Copyright © 2020-2022 www.xiamiku.com. All Rights Reserved .