狠狠任你日线观看免费,亚洲无码av中文字幕,成年奭片免费观看大全部视频

類型：行業(yè)軟件大小：7.3M語言：中文評分：10.0
標(biāo)簽：

立即下載

1 概述
1.1 定義

在一些B/S結(jié)構(gòu)的應(yīng)用系統(tǒng)中，有很多頁面是需要有水印的。常見的就是公文系統(tǒng)、合同系統(tǒng)等。大家常常關(guān)注的是網(wǎng)站圖片增加水印，而很少關(guān)注頁面水印。剛?cè)oogle了一圈，關(guān)于頁面水印的文章的數(shù)量為幾乎為0. 本文中，流牛木馬就與大家一起交流一下有關(guān)制作網(wǎng)頁水印的心得。

本文討論以下的情形：新增水印的方法需要用Javascript完成，并要求能夠方便地加入到原有的頁面中，不能影響到已有的功能。

1.2 預(yù)期目標(biāo)

就圖片水印實(shí)現(xiàn)方案來說，我們預(yù)期至少包括以下幾個目標(biāo)：

1. 實(shí)現(xiàn)懸浮、半透明的圖片水印

2. 包含水印的頁面，所有元素均為只讀(不可寫)

3. 在包含框架頁面中，可以控制任意一個子頁面或父頁面的水印生成

4. 在頁面放大、縮小(resize過程)后，需要在保證頁面不刷新的前提下，重新生成適應(yīng)頁面大小的新水印，以保證所有內(nèi)容都被水印覆蓋，并且不會因水印圖片范圍過大而產(chǎn)生滾動條。

5. 支持IE6\7\8瀏覽器。暫不考慮其他瀏覽器。

1.3 效果圖

加密前：

加密后：

可以打開附件里的文件進(jìn)行查看。

2 實(shí)現(xiàn)步驟
2.1 基本構(gòu)思

加密的過程是一個Javascript函數(shù)執(zhí)行過程，所以我們首先應(yīng)該考慮用Javascript操作DOM對象的方式。

在已有的HTML頁面中，新建一個DOM對象在Body節(jié)點(diǎn)下。該對象的長、寬均經(jīng)過計算，保證在覆蓋全部頁面內(nèi)容的同時又不產(chǎn)生滾動條。將該對象覆蓋到原有的頁面之上，設(shè)置背景圖，并設(shè)置為透明。

創(chuàng)建新DOM元素：

使用document對象里的createElement方法。創(chuàng)建元素后，設(shè)置它的z-index為一個大整數(shù)，保證它能夠比已有網(wǎng)頁的最大z-index大，才能完成“覆蓋”。

計算新對象大�。�

利用三個DOM對象值： clientWidth 、scrollHeight與clientHeight.

網(wǎng)頁中一般不會出現(xiàn)橫向滾動條，故不使用scrollWidth.

而縱向的滾動條就很常見了。

為了保證頁面內(nèi)容全部覆蓋，在未出現(xiàn)滾動條的時候，使用clientHeight，出現(xiàn)滾動條后，則使用scrollHeight。

設(shè)置透明：

利用Alpha值。Alpha是IE支持的css filter。

2.2 應(yīng)變細(xì)節(jié)

有一個小細(xì)節(jié)是很有意思的，前文也提過了，就是resize的過程。

試想，當(dāng)一個頁面打開的時候是550px×400px，那么自然會生成550px×400px大小的水印。但當(dāng)用戶對它進(jìn)行最大化時，頁面沒有刷新，不會重新執(zhí)行生成水印的函數(shù)，那么以前生產(chǎn)的水印圖片就太小了。

如下圖所示的情況。請注意，它的右側(cè)、下側(cè)都是沒有水印的。

為了應(yīng)對這種情況，我們就需要對body的onresize()函數(shù)進(jìn)行處理。如果以前定義沒有onresize()函數(shù)，則直接添加onresize()；如果以前有onresize()函數(shù)，則對之進(jìn)行修改。

2.3 最終代碼

考慮到框架頁面需要考慮的情況，該方法包括三個參數(shù)：目標(biāo)頁面對象、目標(biāo)頁面字符串、背景圖片。

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);

}