ウォーターマークを追加するVUEマイクロチャンネルページ
この$ nextTick（関数（）{
透かし（{watermark_txt： "<div>" + '123' + "</ div> <div>" + '456' + "</ div>"}）;
}）
透かし機能（設定）{
//デフォルト
のvar defaultSettings = {
watermark_txt： "テキスト"、
watermark_x：70、// X座標透かしの開始位置
watermark_y：10、// Yは透かしの開始位置の座標
watermark_rows：100、 //行数透かし
watermark_cols：2、//列の透かしの数
watermark_x_space：60、// X軸間隔透かし
watermark_y_space：40、// y軸間隔透かし
watermark_color： '＃のAAA'、//透かしフォント色
watermark_alpha：0.3、 //透かし透明
watermark_fontsize： '26rem'、//透かしフォントサイズ
watermark_width：60、//透かし幅
watermark_height：60、//高透かし
watermark_angle：傾斜透かしの10 //数
};
//使用設定項目は、デフォルト値をオーバーライドjquery.extendのように動作します
IF（=== 1 && typeof演算引数[0] === "オブジェクト" arguments.lengthを）
{
VARのSRC =引数[0] || {}。
（SRCで鍵）の
{
IF（SRC [キー] && defaultSettings [キー] && SRC [キー] === defaultSettings [キー]）
続けます。
そうであれば（SRC [キー]）
defaultSettings [キー] = SRC [キー]。
}
}
VAR oTemp = document.createDocumentFragment（）。
//获取页面最大宽度
VAR page_width = Math.max（document.body.scrollWidth、document.body.clientWidth） - 30。
//获取页面最大高度
// VAR page_height = Math.max（document.body.scrollHeight、document.body.clientHeight）。
Math.max page_height = VAR（$（ "＃のいるIContainer"）（0）.clientHeight、document.body.clientHeight、$（ "＃のいるIContainerは"）（0）.scrollHeight ..をゲット） - 20である;
//するvar page_height 。= $（ "＃のいるIContainer"）（0）.scrollHeightを取得します。
（。page_height、$（ "＃のいるIContainer"）outerHeight（））//はconsole.log;
//列の透かしの数は0、または透かしに設定されている場合列の数は、透かしと透かし列のX軸間隔を再計算し、次に、ページの最大幅を超えて、大きすぎる
（defaultSettings.watermark_cols == 0 ||（のparseInt場合 （defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space *（defaultSettings.watermark_cols - 1））> page_width））{
defaultSettings.watermark_cols =のparseInt（（+ page_width-defaultSettings.watermark_x defaultSettings.watermark_x_space）/（defaultSettings。watermark_width + defaultSettings.watermark_x_space））;
=のparseInt defaultSettings.watermark_x_space（（page_width - defaultSettings.watermark_x - defaultSettings.watermark_width defaultSettings.watermark_cols *）/（defaultSettings.watermark_cols - 1））;
}
//行透かし設定の数が0に大きすぎる場合、または行の透かしの数最大ページ長を超えて、行の数は、透かしと透かしY軸間隔を再計算する
場合（defaultSettings.watermark_rows == 0 ||（のparseInt （defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space *（defaultSettings.watermark_rows - 1））> page_height））{
defaultSettings.watermark_rows =のparseInt（（+ page_height defaultSettings.watermark_y_space - defaultSettings.watermark_y）/（+ defaultSettings.watermark_height defaultSettings.watermark_y_space））。
defaultSettings.watermark_y_space =のparseInt（（（page_height - defaultSettings.watermark_y） - defaultSettings.watermark_height * defaultSettings.watermark_rows）/（defaultSettings.watermark_rows - 1））。
}
VARのX。
VaRのY;
用（VAR i = 0; iはdefaultSettings.watermark_rowsを<; Iは++）{
Y = defaultSettings.watermark_y +（defaultSettings.watermark_y_space + defaultSettings.watermark_height）* I。
用（VARのJ = 0; J <defaultSettings.watermark_cols; J ++）{
X = defaultSettings.watermark_x +（defaultSettings.watermark_width + defaultSettings.watermark_x_space）* J。
VAR mask_div =のdocument.createElement（ 'DIV'）;
mask_div.id = 'mask_div' + iの+ J;
mask_div.classNameは= 'mask_div';
mask_div.innerHTML = defaultSettings.watermark_txt。
//设置水印DIV倾斜显示
mask_div.style.webkitTransform = "回転（ - " + defaultSettings.watermark_angle + "度）";
; - "（+ defaultSettings.watermark_angle + "度mask_div.style.MozTransform =）"回転"
; - "（+ defaultSettings.watermark_angle + "度mask_div.style.msTransform =）"回転"
; - "（+ defaultSettings.watermark_angle + "度mask_div.style.OTransform =）"回転"
mask_div.style.transform = "回転（ - " + defaultSettings.watermark_angle + "度）";
mask_div.style.visibility = "
// mask_div.style.left = X + 'ピクセル';
mask_div.style.top = Y + 'ピクセル';
mask_div.style.overflow = "隠されました";
mask_div.style.zIndex = "9999999";
mask_div.style.pointerEvents =「なし」。
mask_div.style.opacity = defaultSettings.watermark_alpha。
mask_div.style.fontSize = defaultSettings.watermark_fontsize。
mask_div.style.fontFamily = defaultSettings.watermark_font。
mask_div.style.color = defaultSettings.watermark_color。
mask_div.style.textAlign =「センター」。
// mask_div.style.width = defaultSettings.watermark_width + 'ピクセル';
// mask_div.style.height = defaultSettings.watermark_height + 'ピクセル';
mask_div.style.lineHeight = '.32rem';
mask_div.style.display =「インラインブロック」。
oTemp.appendChild（mask_div）。
}。
}。
console.log（$（ 'mask_div：奇数'））;
document.body.appendChild（oTemp）。
$（ 'mask_div：奇数'）、CSS（{左：defaultSettings.watermark_x + 'PX'}）。
CSS：$（ 'さえmask_div'）（{右：defaultSettings.watermark_x + 'PX'}）。
}