頁面水印功能控制項

2021-08-14 08:40:20 字數 1371 閱讀 5991

根據要求,最近要做乙個頁面水印的功能,找了寫網上資料,整合了乙個水印控制項,直接上**,注釋都很清楚:

(function($) 

//採用配置項替換預設值,作用類似jquery.extend

if (arguments.length > 1 && typeof arguments[0] === "object") ;

// $.extend(this.defaults, src);

for (key in src) else

}} var otemp = document.createdocumentfragment();

//獲取頁面最大寬度

var page_width = math.max($dom[0].scrollwidth, $dom[0].clientwidth);

var cutwidth = page_width * 0.0150;

var page_width = page_width - cutwidth;

//獲取頁面最大高度

var page_height = math.max($dom[0].scrollheight, $dom[0].clientheight);

//如果將水印列數設定為0,或水印列數設定過大,超過頁面最大寬度,則重新計算水印列數和水印x軸間隔

if (defaults._cols == 0

|| (parseint(defaults._x + defaults._width * defaults._cols

+ defaults._x_space * (defaults._cols - 1)) > page_width))

//如果將水印行數設定為0,或水印行數設定過大,超過頁面最大長度,則重新計算水印行數和水印y軸間隔

if (defaults._rows == 0

|| (parseint(defaults._y + defaults._height * defaults._rows

+ defaults._y_space * (defaults._rows - 1)) > page_height))

var x;

var y;

for (var i = 0; i < defaults._rows; i++)

;} ;

} $.fn.waterprint = function(settings)

})(jquery)

下面是用例:

js生成頁面水印

獲取想要插入水印的文件節點的頂點座標值x,y。獲取文件節點的高度heigt和寬度width。用div包裹文本來生成水印。定義好div的長寬高間距等各種屬性。定義虛擬節點createdocumentfragment 包裹水印文件。先進行行 hang 迴圈,一行一行生成水印,以x,y為初始座標,生成乙個...

jquery頁面水印外掛程式,支援多行水印 行錯開

最近工作需求,需要在頁面上加水印,但發現網上示例無法滿足我的需求,所以還是自己動手寫。有幾個特別需求 1.可以寫多行水印,並且中心對齊。2.每行水印錯開。ps 我找到的例子都是單行水印,所以用不了,想做的效果如下。圖1 實現思路 實現頁面水印主要是有兩種方法。1.dom元素 就是將水印放置dom元素...

jquery頁面水印外掛程式,支援多行水印 行錯開

最近工作需求,需要在頁面上加水印,但發現網上示例無法滿足我的需求,所以還是自己動手寫。有幾個特別需求 1.可以寫多行水印,並且中心對齊。2.每行水印錯開。ps 我找到的例子都是單行水印,所以用不了,想做的效果如下。圖1 實現思路 實現頁面水印主要是有兩種方法。1.dom元素 就是將水印放置dom元素...