js為頁面元素新增水印

2022-02-16 00:56:12 字數 1260 閱讀 6107

近期有需求為頁面部分區域新增上水印，通過在網上找到了js為頁面新增水印的方法，後來經過自己的改進，可以實現為頁面部分元素新增水印，最終效果如下圖：

**如下：

function


watermark(settings) ;


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


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


;for(key in


src)


}var otemp =document.createdocumentfragment();


var maskelement=document.getelementbyid(defaultsettings.watermarl_element)||document.body;


//獲取頁面最大寬度


var page_width =math.max(maskelement.scrollwidth,maskelement.clientwidth);


//獲取頁面最大高度


var page_height =math.max(maskelement.scrollheight,maskelement.clientheight);


//水印數量自適應元素區域尺寸


defaultsettings.watermark_cols=math.ceil(page_width/(defaultsettings.watermark_x_space+defaultsettings.watermark_width));


defaultsettings.watermark_rows=math.ceil(page_height/(defaultsettings.watermark_y_space+defaultsettings.watermark_height));


varx;        


vary;


for (var i = 0; i < defaultsettings.watermark_rows; i++) ;};}


watermark（）
*注意：需要為元素加上絕對定位或相對定位屬性，加上overflow：hidden；該方法在ie9及以上效果比較好，但在ie9以下，水印不會傾斜，美觀上打了折扣，pointerevents='none' 的css屬性無法識別，導致水印會遮擋住元素，導致元素的滑鼠事件無法觸發。

js新增水印

watermark 傳入動態水印內容 function watermark settings 採用配置項替換預設值，作用類似jquery.extend if arguments.length 1 typeof arguments 0 object for key in src var otemp d...

js網頁新增水印

改編摘自 hjl 2017年6月19日19 25 43 function watermark settings 採用配置項替換預設值，作用類似jquery.extend if arguments.length 1 typeof arguments 0 object for key in src va...

頁面如何新增水印？

最近做vue專案的時候，需要要求要在頁面中新增水印的效果，網上找了一些方法，具體操作如下 1 頁面中新增乙個檔案比如 watermark.ts,如下 const watermark any const setwatermark str any const can document.createele...