通過js在web前端增加水印

展示效果：

前面頁面新增此方法：

/**

*settings ：

*/

functionwatermark(settings) ;

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

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

for(keyinsrc)

}

varotemp = document.createdocumentfragment();

//獲取頁面最大寬度

varpage_width = math.max(document.body.scrollwidth, document.body.clientwidth);

//獲取頁面最大長度

varpage_height = math.max(document.body.scrollheight, document.body.clientheight);

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

if(defaultsettings.watermark_cols == 0 || (parseint(defaultsettings.watermark_x + defaultsettings.watermark_width * defaultsettings.watermark_cols + defaultsettings.watermark_x_space * (defaultsettings.watermark_cols - 1)) > page_width))

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

if(defaultsettings.watermark_rows == 0 || (parseint(defaultsettings.watermark_y + defaultsettings.watermark_height * defaultsettings.watermark_rows + defaultsettings.watermark_y_space * (defaultsettings.watermark_rows - 1)) > page_height))

varx;

vary;

for(vari = 0; i

};

使用方法：

在onload函式裡面，直接呼叫該js方法，如下：

watermark();

js 給頁面容器增加水印

功能 給頁面容器增加水印 用法 watermark watermark width 100,水印寬度 watermark rows 9,watermark x space 0,水印x軸間隔 watermark y space 0,水印y軸間隔 export function watermark se...

通過js渲染高層級DOM實現網頁加水印

doctype html html lang en head meta charset utf 8 title watermarks title head style type text css html,body style body script watermark function water...

web前端 js 下拉重新整理

下拉重新整理 var w w 0 var list reload var move 0 移動距離 var ystart 0 開始觸碰y座標 var ymove 0 滑動的y座標 var yend 0 移開的y座標 var moveall 0 最後移動的距離 手指觸碰螢幕 w.addeventlist...