js生成頁面水印

獲取想要插入水印的文件節點的頂點座標值x，y。

獲取文件節點的高度heigt和寬度width。

用div包裹文本來生成水印。

定義好div的長寬高間距等各種屬性。

定義虛擬節點createdocumentfragment()包裹水印文件。

先進行行（hang）迴圈，一行一行生成水印，以x，y為初始座標，生成乙個top為y，left為x，自帶寬高的一列水印。每生成一行，y的值遞增（高度加行距），x的值重置為初始值。

再進行列迴圈，一列一列生成水印，每生成一列，x的值遞增（寬度加間距）。

function

watermark(element, config) ;
}return
; }
if (!element) return
; 
//預設配置
const _config =;
//替換預設配置
if(arguments.length === 2 && typeof arguments[1] ==="object") ;
for(let key in
src) 
else
if(src[key])}}
//節點的總寬度
const total_width =element.scrollwidth;
//節點的總高度
const total_height =element.scrollheight;
//建立文字碎片，用於包含所有的插入節點
const mark =document.createdocumentfragment();
//水印節點的起始座標
const position =getoffset(element);
let x = position.x + _config.start_x, y = position.y +_config.start_y;
//先迴圈y軸插入水印
dopx`;
item.style.top =`$px`;
item.style.width =`$px`;
item.style.height =`$px`;
item.style.fontsize =`$px`;
item.style.color =_config.color;
item.style.textalign = 'center';
item.style.opacity =_config.alpha;
item.style.filter = `alpha(opacity=$)`;
= `opacity($%)`;
item.style.webkittransform = `rotate(-$deg)`;
item.style.moztransform = `rotate(-$deg)`;
item.style.mstransform = `rotate(-$deg)`;
item.style.otransform = `rotate(-$deg)`;
item.style.transform = `rotate(-$deg)`;
item.style.pointerevents = 'none'; //
讓水印不遮擋頁面的點選事件
//建立text1水印節點
const text1 = document.createelement('div');
//建立text2水印節點
const text2 = document.createelement('div');
//新增水印節點到文字碎片
//x座標遞增
x = x + _config.width +_config.space_x;
//超出文字右側座標停止插入
} while (total_width + position.x > x +_config.width);
//重置x初始座標
x = position.x +_config.start_x;
//y座標遞增
y = y + _config.height +_config.space_y;
//超出文字底部座標停止插入
} while (total_height + position.y > y +_config.height);
//插入文件碎片
js為頁面元素新增水印
近期有需求為頁面部分區域新增上水印，通過在網上找到了js為頁面新增水印的方法，後來經過自己的改進，可以實現為頁面部分元素新增水印，最終效果如下圖 如下 function watermark settings 採用配置項替換預設值，作用類似jquery.extend if arguments.leng...
web頁面水印（簡單 通用 強大 純js）
web頁面水印 簡單 通用 強大 純js 呼叫與效果 fnwatermark textlist 您好，歡迎回家！水印 param options style textlist 文字集合，每一項為字串型別，每一項佔一行 xpadding number 左邊距 右邊距 ypadding number 上...
js 給頁面容器增加水印
功能 給頁面容器增加水印 用法 watermark watermark width 100,水印寬度 watermark rows 9,watermark x space 0,水印x軸間隔 watermark y space 0,水印y軸間隔 export function watermark se...